vue3 用vuex 模块划分踩坑记录

 

 首先在src下创建一个文件夹store。在store下创建index.ts文件(用来引入modules下的其他模块文件)和modules文件夹(存放各个功能模块的store)

index.ts的内容

import { createStore } from "vuex";
import login from './modules/login'
const store = createStore({
  modules: {
    login
  },
});
export default store

在modules下创建login.ts文件来存放登录相关的信息

然后我在vue文件中使用

import { useStore } from 'vuex'
const store = useStore()
store.commit('login/setLoginToken', true)

发现一直报错 unknown mutation type: login/setLoginToken

后来我发现 我眼瞎直接把login.ts的格式复制成了这样

import { createStore } from "vuex";
const store = createStore({
  state: {
    login_token: null
  },
  getters: {},
  mutations: {
    setLoginToken(state, token: Boolean) {
        console.log(token)
        state.login_token = token
    }
  },
  actions: {},
  modules: {},
});
export default store

正确的应该如下所示

const login = {
  state: {
    login_token: null
  },
  getters: {},
  mutations: {
    setLoginToken(state, token: Boolean) {
        console.log(token)
        state.login_token = token
    }
  },
  actions: {},
  modules: {},
};
export default login

修改之后仍然报错

发现没有开启命名空间

const login = {
  namespaced: true,  //命名
  state: {
    login_token: null
  },
  getters: {},
  mutations: {
    setLoginToken(state, token: Boolean) {
        console.log(token)
        state.login_token = token
    }
  },
  actions: {},
  modules: {},
};
export default login

写代码需要细心~