Vuex模块化

Vuex使用modules

store目录结构示意图：

store
│   index.js
│   state.js
|	getters.js
|	mutations.js
|	actions.js
|	modules.js
│
└───modules
	│
	└───moduleA
	|	│   index.js
	|	│   state.js
	|	│   getters.js
	|	|	mutations.js
	|	|	actions.js
	|	└───modules.js
 	|
 	└───moduleB
 		└───…………

store 中的 index.js

import moduleA from ‘./modules/moduleA‘

const store = new Vuex.store({
      state: () => ({……}),
      getters: {……},
      mutations: {……},
      actions: {……},
      modules: {
            moduleA
      }
})

模块A

const moduleA = {
      namespaced: true,	// 命名空间
      state: () => ({
            msg: ‘模块A的数据‘
      }),
      getters: {……},
      mutations: {……},
      actions: {……},
      modules: {……}		// 模块里面可以继续嵌套
}

某个组件使用模块A的数据

<template>
	<div>{{moduleA.msg}}</div>		// 模块A的数据
</template>

<script>
	import { mapState } from ‘vuex‘
	export default{
		computer: {
			...mapState(‘moduleA‘, [‘msg‘])		// 第一个参数为模块的名字，需要将 namespaced 的值改为 true
		}
	}
</script>

Vuex模块化

原文：https://www.cnblogs.com/WuMouRen/p/14323145.html