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

写代码需要细心~

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值