Why does Vue 3 not recognize my Vuex store module?

Viewed 317

I'm very new to Vuex and I'm having trouble getting Vue 3 to recognize my store module:

Store:

import { createStore } from "vuex";
import { UserModule } from "./User";

export default createStore({
  state: {},

  mutations: {},

  actions: {},

  modules: {
    User: UserModule,
  }
});

User:

export const UserModule = {
  namespaced: true,

  state: {
    user: null,
  },

  mutations: {
    SET_USER(state: any, user: any) {
      state.user = user;
    }
  },

  actions: {
    setUser({commit}: any, user: any) {
      commit('SET_USER', user);
    }
  },
  modules: {}
}

Router:

import store from "../store";

router.beforeEach(async (to, from, next) => {
  const user: any = store.state.User.user;
}

Typescript linting error

It works if I use state directly from the store, but, I'd like to use it from modules.

Can anyone point me in the right direction?

0 Answers
Related