我有一个vuex文件，其中有大量的mutator，但我不确定将它分成不同文件的正确方法。
因为我有：
Sources然后在我的主要Vue应用声明之下：const store = new Vuex.Store({ vuex stuff })
我很高兴与Vue组件合作并且已经有很多这样的组件，但这是应用程序顶层的东西，我不知道如何将它分开。任何建议表示赞赏。
答案 0 :(得分：13)
对于那些想要在不创建更复杂的模块化应用程序结构的情况下拆分Vuex文件的人，我认为也可以简单地将动作，突变和getter分解为单独的文件：
└── src
├── assets
├── components
└── store
├── store.js
├── actions.js
├── mutations.js
└── getters.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,
});
const actionOne = (context) => {
...
context.commit('PROP1_UPDATED', payload);
};
const actionTwo = (context) => {
...
context.commit('PROP2_UPDATED', payload);
};
export default {
actionOne,
actionTwo,
};
const PROP1_UPDATED = (state, payload) => {
state.someObj.prop1 = payload;
};
const PROP2_UPDATED = (state, payload) => {
state.someObj.prop2 = payload;
};
export default {
PROP1_UPDATED,
PROP2_UPDATED,
};
const prop1 = state => state.someObj.prop1;
const prop2 = state => state.someObj.prop2;
export default {
prop1,
prop2,
};
...然后您可以使用通常的this.$store.dispatch('actionOne') ...
答案 1 :(得分：11)
这是用于拆分商店并具有不同模块的另一个选项，该选项已经过测试。
结构
└── 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
store / 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;
商店/模块/模块1 / index.js
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import state from './state';
export default {
state,
actions,
mutations,
getters
}
store / modules / 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
}
提示：别忘了将商店导入到main.js
答案 2 :(得分：9)
您可以将它们分成不同的模块。这样，您可以将所有相关的突变，getter，状态和操作保存在单独的文件中。文档更好地解释了它：https://vuex.vuejs.org/en/modules.html
答案 3 :(得分：1)
您可以将此结构与动态负载存储模块一起使用。
src
└─ store
└─ modules
└─ [module-name].js
└─ ...
└─ index.js // <- your store main file
和 index.js
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
// Load store modules dynamically.
const requireContext = require.context('./modules', false, /.*\.js$/)
const modules = requireContext.keys()
.map(file =>
[file.replace(/(^.\/)|(\.js$)/g, ''), requireContext(file)]
)
.reduce((modules, [name, module]) => {
if (module.namespaced === undefined) {
module.namespaced = true
}
return { ...modules, [name]: module }
}, {})
export default new Vuex.Store({
modules
})
之后，只需将模块 [name] .js 放入 modules 文件夹中，例如：
auth.js：
// state
export const state = {}
// getters
export const getters = {}
// mutations
export const mutations = {}
// actions
export const actions = {}
访问您的操作/获取器。您必须写：
export default {
computed: {
...mapGetters({
method_1: '[module-name]/method_1',
method_2: '[module-name]/method_2',
}),
method_with_arg(){
return this.$store.getters['[module-name]/method_with_arg'](this.n)
}
},
...
您可以找到 Cretu Eusebiu 的演示here (laravel-vue-spa)。
谢谢。
答案 4 :(得分：0)
除@bigsee's fine answer以外，如果使用index.js文件导出模块，则：
└── src
├── assets
├── components
└── store
└─ mymodule
├── store.js
├── actions.js
├── mutations.js
├── getters.js
└── index.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
}
const getData = state => state.data
export {
getData
}
类似于动作，变异和状态文件。
答案 5 :(得分：0)
我有这样的结构：
└── store
└─ module1
├── actions.js
├── mutations.js
├── getters.js
└── index.js
index.js
，您可以复制以下示例代码： 来自module1的index.js
import actions from "./actions";
import getters from "./getters";
import mutations from "./mutations";
import { state } from "./state";
export default {
state: () => state,
actions,
mutations,
getters,
};
状态：
export let state = {
themes: [],
};
获取者：
const themesList = (state) => {
return state.themes;
};
动作：
const getThemesList = async ({ commit }) => {
commit(types.GET_THEMES, [values]);
};
变异：
const GET_THEMES = (state, themes) => {
state.themes = themes;
};
并将其放在商店的主要index.js中
const createStore = () => {
return new Vuex.Store({
modules: {
module1: module1,
},
});
};
export default createStore;
答案 6 :(得分：0)
对于更多的嵌套模块，您可以在子模块中导出“模块”。
如何在子模块中暴露模块？
import Vuex from 'vuex';
import Vue from 'vue';
import actions from './actions';
import getters from './getters';
import mutations from './mutations';
import moudles from './moudles';
Vue.use(Vuex);
export const store = new Vuex.Store({
state: {
someObj: {},
},
actions,
getters,
mutations,
moudles,
});
└── src
├── assets
├── components
└── store
└─ modules
└─ module1
├── state.js
├── actions.js
├── mutations.js
├── getters.js
└── index.js
├── modules
|____moudleA （state.js.....）
|____moudleB （state.js.....）
└─ module2
├── state.js
├── actions.js
├── mutations.js
├── getters.js
└── index.js
└─ index.js