首先在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
写代码需要细心~
扫描二维码关注公众号,回复:
15943308 查看本文章