Vuex的拆分使用

当一个项目比较大时，组件中全局共享的状态的就会很多，从而导致state非常杂乱。解决这个问题的办法是拆分Vuex，将state、mutations、actions、getters拆分成单个js文件，使用时用import命令将各个模块导入。具体做法如下：
首先将state分离出去，state是数据仓库，可以新建一个state.js文件
文件内容如下：

const state = {
	singer:{
		name:'水木年华'
	}
}
export default state

然后拆分mutations
mutations可以被拆分为mutation-types.js和mutations.js
前者是函数名定义模块，后者是mutations具体实现模块。这种拆分的好处是实现函数名与函数定义分离，进一步降低了耦合度。
mutation-types.js

export const SET_SINGER = 'SET_SINGER'

mutations.js

import * as types from './mutation-types.js'
const mutations = {
	[types.SET_SINGER](state,singer){
		state.singer = singer
	}
}
export default mutations

getters.js模块：用来获取state中的数据

export const singer = state =>state.singer

index.js：将以上各个松散模块整合

import Vue from 'vue'
import Vuex from 'vuex'
import * as getters from './getters.js'
import * as actions from './actions.js'
import mutations from './mutations.js'
import state from './state.js'
Vue.use(Vuex)

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})

state中的数据使用：组件中映射数据。将state中的数据映射为一个计算属性

import { mapState } from 'vuex'
computed:{
			...mapState(['singer'])
		}

然后就可以使用了

<div ref="animation" style="width: 600px;height: 500px;background-color: deeppink;">
			{{singer}}
		</div>

最后介绍mutations的使用（将mutattions映射为一个方法）

import { mapMutations} from 'vuex'
...mapMutations(
			{
				setState:'SET_SINGER'
			}),

使用映射后的方法

	<button @click="changeState">点击更改</button>
	

methods:{
changeState(){
				this.setState({
		name:'水年华'
	})
			}
}