我有一个 vuex 文件，其中包含越来越多的变量，但我不确定将其拆分为不同文件的正确方法。
因为我有：
const store = new Vuex.Store({ vuex stuff })然后在我的主要 Vue 应用程序声明下面：const app = new Vue({ stuff })
我很高兴使用 Vue 组件并且已经拥有很多组件，但这是应用程序顶层的东西，我不知道如何将它分开。任何建议表示赞赏。
问问题
20375 次
7 回答
41
对于那些想在不创建更复杂的模块化应用程序结构的情况下分解 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,
});
动作.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,
};
getters.js
const prop1 = state => state.someObj.prop1;
const prop2 = state => state.someObj.prop2;
export default {
prop1,
prop2,
};
...然后您可以使用通常的this.$store.dispatch('actionOne')...
于 2018-05-12T12:09:37.527 回答
28
这是拆分商店并拥有不同模块的另一种选择，这已经过测试。
结构体
└── 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
}
提示：不要忘记将您的商店导入您的 main.js
于 2020-03-13T09:50:41.890 回答
15
您可以将它们分成不同的模块。这样，您可以将所有相关的突变、getter、状态和操作保存在单独的文件中。该文档比我能更好地解释它：https ://vuex.vuejs.org/en/modules.html
于 2016-11-13T00:11:27.310 回答
7
除了@bigsee 的好答案，如果使用index.js文件导出模块：
└── src
├── assets
├── components
└── store
└─ mymodule
├── state.js
├── actions.js
├── mutations.js
├── getters.js
└── index.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
}
getters.js
const getData = state => state.data
export {
getData
}
与动作、突变和状态文件类似。
于 2019-03-23T03:15:42.163 回答
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
于 2021-04-20T08:45:48.767 回答
0
您可以将此结构与动态加载存储模块一起使用。
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放在模块文件夹中，例如：
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的演示(laravel-vue-spa)。
谢谢你。
于 2020-06-15T16:17:58.993 回答
0
我有这个结构：
└── store
└─ module1
├── actions.js
├── mutations.js
├── getters.js
└── index.js
index.js
你可以复制这个示例代码：index.js from module1
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;
于 2020-09-17T21:11:17.680 回答