vuex - 模块 modules 使用

最新推荐文章于 2024-09-01 08:34:14 发布

策码奔腾---嘚驾~

最新推荐文章于 2024-09-01 08:34:14 发布

阅读量100

点赞数

本文链接：https://blog.youkuaiyun.com/qq_42489210/article/details/119799056

版权

本文介绍了如何在Vue项目中利用Vuex进行状态管理的模块化操作。首先，自定义了一个名为`modules.js`的文件，定义了counter模块，包含state和mutations。接着，在`vuex/index.js`中导入并配置了这个模块，同时使用了`vuex-along`插件。最后展示了如何通过`this.$store`访问和修改counter模块的状态。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

使用：

1. 自己定义一个modules.js 文件

let modules = {
  counter: {
    state: {
      conuntNum: 0
    },
    mutations: {
      conuntNum(state, data) {
        state.conuntNum += data;
      }
    }
  }
};
export default modules;

2. 引入

vuex / index.js 中导入 modules


import modules from "./modules";  // <------------ 先导入


export default new vuex.Store({
  state,
  actions,
  mutations,
  getters,
  modules,  // <---------- 再引入
  plugins: [
    createVuexAlong({
      local: {
        list: ["user", "menus", "webSocketMsg"],
        isFilter: true
      },
      session: {
        list: ["state", "user", "menus"]
      }
    })
  ] //vuex-along
});

3. 使用