如何分解我的vuex文件？

Question

我有一个vuex文件,其中有大量的mutator,但我不确定将它分成不同文件的正确方法.

因为我有:

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

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

Answer 1

这是拆分您的商店并拥有不同模块的另一种选择，这已经过测试。

结构体

??? src
    ??? assets
    ??? components
    ??? store
       ?? modules
          ?? module1
              ??? state.js
              ??? actions.js
              ??? mutations.js
              ??? getters.js
              ??? index.js
         ?? module2
              ??? state.js
              ??? actions.js
              ??? mutations.js
              ??? getters.js
              ??? index.js
   ?? index.js

商店/index.js

import Vuex from "vuex";
import thisismodule1 from "./modules/module1";
import thisismodule2 from "./modules/module2";

const createStore = () => {
  return new Vuex.Store({
    modules: {
      module1: thisismodule1,
      module2: thisismodule2

    }
  });
};

export default createStore;

商店/模块/module1/index.js

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


export default {
  state,
  actions,
  mutations,
  getters
}

商店/模块/module2/index.js

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


export default {
  state,
  actions,
  mutations,
  getters
}

Tipp：不要忘记将您的商店导入到您的 main.js

文档：https : //vuex.vuejs.org/en/modules.html

Answer 2

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

??? src
     ??? assets
     ??? components
     ??? store
           ??? store.js
           ??? actions.js
           ??? mutations.js
           ??? getters.js

store.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,
});

actions.js

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

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

export default {
  actionOne,
  actionTwo,
};

mutations.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,
};

getters.js

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

export default {
  prop1,
  prop2,
};

...然后你可以使用通常的this.$store.dispatch('actionOne')方式从你的组件中做一些事情......

Answer 3

您可以将它们分成不同的模块.这样,您可以将所有相关的突变,getter,状态和操作保存在单独的文件中.文档解释它比我更好:https://vuex.vuejs.org/en/modules.html

Answer 4

除了@bigsee 的好答案，如果使用index.js文件导出模块：

??? src
    ??? assets
    ??? components
    ??? store
          ?? mymodule
              ??? state.js
              ??? actions.js
              ??? mutations.js
              ??? getters.js
              ??? index.js

索引.js

??? src
    ??? assets
    ??? components
    ??? store
          ?? mymodule
              ??? state.js
              ??? actions.js
              ??? mutations.js
              ??? getters.js
              ??? index.js

getters.js

import state from './state'
import * as getters from './getters'
import * as mutations from './mutations'
import * as actions from './actions'

export default {

  state,
  getters,
  mutations,
  actions
}

与动作、突变和状态文件类似。