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

本文主要是介绍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大法。

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

这篇关于Vuex如何脚本化生成mutations，优势和业务便利性在哪里？的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！

---