Vuex如何脚本化生成mutations，优势和业务便利性在哪里？

说脚本之前，先看一下这些繁琐的操作是否在你的vue项目中存在？

1.在modules下每新生成一个文件就要新建 state  getters mutations actions 

2.在每个需要用到vuex的地方进行store 引入

3.每次更改state时， 都要防止mutations 函数名称打错， 或频繁到mutations 下的函数中去ctrl c ，再到commit 里去 ctrl v 

如果你正在被上面的繁琐工作掣肘，那么就和我一起来看一下，如何在vue项目中优雅的使用Vuex吧。

我们常规操作下，modules 下的  store 文件都是这样写的：

user.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
    state: {
        user: 'xiaoming',
        age: '18'
    },
    getters: {
        getMessage(state) {
            return state.user + 'is' + age + 'years old'
        }
    },
    mutations: {
       set_user:(state, user) => {
           state.user = user
       },
        set_age:(state, age) => {
           state.age = age
       }
    },
    actions: {
        changeUser({commit}, res) {
            commit('set_user', res.user)
            commit('set_age', res.age)
        }
    }
})

如上：

1.我们每添加一个state 的属性，文件中的 getters  mutations actions  如果业务需要，都需要我们手动配套生成，这就是一个极其繁琐的操作

2.我们在组件中使用该store 时，需要将 如果需要读取state ， 或 改变state， 需要在组件中引入Map辅助函数 ，使用 mapXXX   来操作

3.使用commit 改变state时， 需要手动键入mutations 的函数名，因此会频繁的使用c v大法保证函数名不出错

优雅的使用Vuex：

vuex => modules => user.js

export default {
    state: {
        user: 'xiaohong',
        age: '12'
    }
}

vuex => store.js

import Vue from 'vue'
import Vuex from 'vuex'
import user from './modules/user'

Vue.use(Vuex)

var state = {}
var getters = {}
var mutations = {}
var modules= {
    user
}

/**
*将obj内的值添加到state中
*{object} state store的共享数据
*{object} obj 组件更改的数据对象
*/
var setObjToState = function(state, obj) {
    for(var f in obj) {
        state[f] = obj[f]
    }
}

//自动生成mutations 函数
for (var m in modules) {
    modules[m].mutations = modules[m] || {}
    modules[m].mutations[m + 'SetMutations'] = setObjToState
}

export default new Vuex.store({
    state,
    getters,
    mutations,
    modules
})

在项目的 main.js  内：

import Vue from 'vue'
import store from './vuex/store'

new Vue({
    components: {app},
    store,
    template: '<App/>
}).$mount(#app')

在组件内：

<template>
    <div id="app">
     
    </div>
</template>

<script>
export default {
    data () {
        user: 'jiajia',
        age: '6'
    },
    methods: {
        changeUser () {
            let _t = this
            //无论在 store 的 state 里新增多少属性， 在改变state时只需用通过 模块名+SetMutations 进行调用即可
            _t.$store.commit('userSetMutations', {
                user: _t.user,
                age: _t.age
            })
        }
    }
}
</script>

可以看到在store.js  优化后， 无论在 store 的 state 里新增多少属性，都无需配套新增mutations 等函数， 而且在改变state时只需用通过 模块名+SetMutations 进行调用即可，不用担心函数名键入错误，或频繁使用cv大法。

内容原创，转载注明出处。