五、复杂项目中使用modules的方法

五、复杂项目中使用modules的方法

大型项目中，不同的模块的state、mutations、actions都放在一个文件中，使用，维护起来都非常难受（不清晰）——>把store分模块

使用场景：大型，复杂项目中多个组件共享store中一部分state，另一些组件共享另一部分state。

使用方式：

• 文件结构划分：

src
	store
		index.js
		counter1
			index.js
			state,js
			mutations.js
			actions.js
		counter2
			index.js
			state,js
			mutations.js
			actions.js

• 写法：

src>store>index.js

import Vuex from 'vuex';
import counter1 from './counter1';
import counter2 from './counter2';

Vue.use(Vuex);

export default new Vuex.Store({
    modules: {
        counter1,
        counter2
    }
})

src>store>counter1>index.js

src>store>counter2>index.js

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

export default {
	namespaced: true,
    state,
    mutations
}

组件中如何使用这些模块：