如何分解我的 vuex 文件?

新手上路,请多包涵

我有一个 vuex 文件,其中包含越来越多的增变器,但我不确定将其拆分为不同文件的正确方法。

因为我有:

const store = new Vuex.Store({ vuex stuff }) 然后在我的主要 Vue 应用声明下面: const app = new Vue({ stuff })

我很高兴使用 Vue 组件并且已经有很多这样的组件,但这是应用程序顶层的东西,我不确定如何将它分开。任何建议表示赞赏。

原文由 daninthemix 发布,翻译遵循 CC BY-SA 4.0 许可协议

阅读 512
1 个回答

对于那些想在不创建更复杂的模块化应用程序结构的情况下分解 Vuex 文件的人,我认为也可以简单地将动作、突变和 getter 分解为单独的文件,如下所示:

 └── src
     ├── assets
     ├── components
     └── store
           ├── store.js
           ├── actions.js
           ├── mutations.js
           └── getters.js

商店.js

 import Vuex from 'vuex';
import Vue from 'vue';

import actions from './actions';
import getters from './getters';
import mutations from './mutations';

Vue.use(Vuex);

export const store = new Vuex.Store({
  state: {
    someObj: {},
  },
  actions,
  getters,
  mutations,
});

动作.js

 const actionOne = (context) => {
  ...
  context.commit('PROP1_UPDATED', payload);
};

const actionTwo = (context) => {
  ...
  context.commit('PROP2_UPDATED', payload);
};

export default {
  actionOne,
  actionTwo,
};

突变.js

 const PROP1_UPDATED = (state, payload) => {
  state.someObj.prop1 = payload;
};

const PROP2_UPDATED = (state, payload) => {
  state.someObj.prop2 = payload;
};

export default {
  PROP1_UPDATED,
  PROP2_UPDATED,
};

getter.js

 const prop1 = state => state.someObj.prop1;
const prop2 = state => state.someObj.prop2;

export default {
  prop1,
  prop2,
};

…然后您就可以使用通常的 this.$store.dispatch('actionOne')

原文由 bigsee 发布,翻译遵循 CC BY-SA 4.0 许可协议

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题