当一个项目比较大时,组件中全局共享的状态的就会很多,从而导致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:'水年华'
})
}
}