wip

src/store/account/actions.ts

@@ -1,8 +1,8 @@
 import { ActionTree } from 'vuex';
-import { StateInterface } from '../index';
+import { RootStateInterface } from '../index';
 import { AccountStateInterface } from './state';
 
-const actions: ActionTree<AccountStateInterface, StateInterface> = {
+const actions: ActionTree<AccountStateInterface, RootStateInterface> = {
   logout(context) {
     context.commit('setToken', '');
     context.commit('setUsername', '');

src/store/account/getters.ts

@@ -1,8 +1,7 @@
 import { GetterTree } from 'vuex';
-import { StateInterface } from '../index';
 import { AccountStateInterface } from './state';
 
-const getters: GetterTree<AccountStateInterface, StateInterface> = {
+const getters: GetterTree<AccountStateInterface, any> = {
   getToken(state: AccountStateInterface): string {
     return state.token;
   },

src/store/account/index.ts

@@ -1,11 +1,11 @@
 import { Module } from 'vuex';
-import { StateInterface } from '../index';
+import { RootStateInterface } from '../index';
 import state, { AccountStateInterface } from './state';
 import actions from './actions';
 import getters from './getters';
 import mutations from './mutations';
 
-const accountStateModule: Module<AccountStateInterface, StateInterface> = {
+const accountStateModule: Module<AccountStateInterface, RootStateInterface> = {
   namespaced: true,
   actions,
   getters,

src/store/index.ts

@@ -1,63 +1,59 @@
-import { store } from 'quasar/wrappers'
+import { store } from 'quasar/wrappers';
-import { InjectionKey } from 'vue'
-import { Router } from 'vue-router'
 import {
   createStore,
-  Store as VuexStore,
+  Module,
-  useStore as vuexUseStore,
+  createComposable,
-} from 'vuex'
+  Getters,
+  Mutations,
+} from 'vuex-smart-module';
+import { AccountStateInterface } from './account/state';
 
-// import example from './module-example'
+class RootState {
-// import { ExampleStateInterface } from './module-example/state';
+  count = 1;
-
-/*
- * If not building with SSR mode, you can
- * directly export the Store instantiation;
- *
- * The function below can be async too; either use
- * async/await or return a Promise which resolves
- * with the Store instance.
- */
-
-export interface StateInterface {
-  // Define your own store structure, using submodules if needed
-  // example: ExampleStateInterface;
-  // Declared as unknown to avoid linting issue. Best to strongly type as per the line above.
-  example: unknown
 }
 
-// provide typings for `this.$store`
+class RootGetters extends Getters<RootState> {
-declare module '@vue/runtime-core' {
+  get count () {
-  interface ComponentCustomProperties {
+    return this.state.count;
-    $store: VuexStore<StateInterface>
+  }
+
+  multiply (multiplier: number) {
+    return this.state.count * multiplier;
   }
 }
 
-// provide typings for `useStore` helper
+class RootMutations extends Mutations<RootState> {
-export const storeKey: InjectionKey<VuexStore<StateInterface>> = Symbol('vuex-key')
+  add (payload: number) {
+    this.state.count += payload;
+  }
+}
 
-// Provide typings for `this.$router` inside Vuex stores
+// This is the config of the root module
-declare module "vuex" {
+// You can define a root state/getters/mutations/actions here
-  // eslint-disable-next-line @typescript-eslint/no-unused-vars
+// Or do everything in separate modules
-  export interface Store<S> {
+const rootConfig = {
-    readonly $router: Router;
+  state: RootState,
-  }
+  getters: RootGetters,
-}
+  mutations: RootMutations,
+  modules: {
+    //
+  },
+};
+
+export const root = new Module(rootConfig);
 
 export default store(function (/* { ssrContext } */) {
-  const Store = createStore<StateInterface>({
+  const rootStore = createStore(root, {
-    modules: {
+    strict: !!process.env.DEBUGGING,
-      // example
+    // plugins: []
-    },
+    // and other options, normally passed to Vuex `createStore`
+  });
 
-    // enable strict mode (adds overhead!)
+  return rootStore;
-    // for dev mode and --debug builds only
+});
-    strict: !!process.env.DEBUGGING
-  })
 
-  return Store;
+export const useStore = createComposable(root);
-})
 
-export function useStore() {
+export interface RootStateInterface {
-  return vuexUseStore(storeKey)
+  account: AccountStateInterface;
 }