Using a Vuex 4 store in non-Vue components?

[icebirdmail]

I'm trying to upgrade our app to Quasar 2 / Vue 3 at the moment, which includes a migration to Vuex 4. The app is using the Vuex store in some non-Vue components - for example in the beforeEach section of the router/index.js file. Previously accessing mutations from these files was pretty simple:

`import { store } from '/store/store.ts'

store.commit('mutation', payload)`

Vuex 4 changed how the store file was constructed. Now when I do an 'import store from /store', the console complains that "commit is not a function".

[TobyMosque]

in the specific case of the beforeEach, u receive the store as argument of the route wrapper,

import { route } from 'quasar/wrappers';
import { IState } from 'path/to/your/types';
import {
  createMemoryHistory,
  createRouter,
  createWebHashHistory,
  createWebHistory,
} from 'vue-router';
import routes from './routes';

export default route<IState>(function (ctx) {
  const createHistory = process.env.SERVER
    ? createMemoryHistory
    : process.env.VUE_ROUTER_MODE === 'history'
    ? createWebHistory
    : createWebHashHistory;
    
  const Router = createRouter({
    scrollBehavior: () => ({ left: 0, top: 0 }),
    routes: routes(ctx),

    // Leave this as is and make changes in quasar.conf.js instead!
    // quasar.conf.js -> build -> vueRouterMode
    // quasar.conf.js -> build -> publicPath
    history: createHistory(
      process.env.MODE === 'ssr' ? void 0 : process.env.VUE_ROUTER_BASE
    ),
  });
  
  Router.beforeEach((to, from, next) => {
    const { store } = ctx
    store.commit('setPreviousPage', from.name)
    next()
  })
  
  return Router;
})

the same is valid to boots and to the preFetch.