feat: create useState composable

packages/x-components/src/composables/use-store.ts

@@ -1,13 +1,40 @@
-import { getCurrentInstance } from 'vue';
+import { computed, ComputedRef, getCurrentInstance } from 'vue';
 import { Store } from 'vuex';
+import { Dictionary } from '@empathyco/x-utils';
+import { ExtractState, XModuleName } from '../x-modules/x-modules.types';
 
 /**
- * Function which returns the `$store` object from the current component instance.
+ * Function which returns the `$store` object from the current component instance
+ * and the selected state as a dictionary of paths.
  *
- * @returns The `$store` object from the current component instance.
+ * @param module - The {@link XModuleName} of the getter.
+ * @returns The state properties of the module and the `$store`.
  *
  * @public
  */
-export function useStore(): Store<any> {
-  return (getCurrentInstance()?.proxy as { $store: Store<any> }).$store;
+export function useStore<Module extends XModuleName, Path extends keyof ExtractState<Module>>(
+  module?: Module
+): UseStore<Module, Path> {
+  const store = (getCurrentInstance()?.proxy as { $store: Store<any> }).$store;
+  const useState = (module: Module, paths: Path[]): ComputedRef<Dictionary<keyof Path>> => {
+    return paths.reduce<ComputedRef<Dictionary<keyof Path>>>((state, path) => {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-comment
+      // @ts-ignore
+      state[path] = computed(() => store.state.x[module][path]);
+      return state;
+    }, {} as ComputedRef<Dictionary<keyof Path>>);
+  };
+  const useStateWithModule = useState.bind(module);
+  return {
+    store,
+    useState: module ? useStateWithModule : useState
+  };
 }
+
+/**
+ * Return type of the {@link useStore} composable.
+ */
+type UseStore<Module extends XModuleName, Path extends keyof ExtractState<Module>> = {
+  store: Store<any>;
+  useState: (module: Module, paths: Path[]) => ComputedRef<Dictionary<keyof Path>>;
+};