简化VUEX多级调用的方法

背景

vuex中的使用mutations中的方法时只能带2个参数，使得我们在页面中调用和变更时非常不方便，需要写多个方法对应多个参数，后来在uni中发现他们的写法很方便，可以在内容页直接用函数的方式修改任意层的单个参数。于是就想扒出来用在其他vue项目中。

思路

其实说起来原理也很简单，无非是在$store.commit之前加入一步参数的分解而已。并且在main.js中写入方法直接调用。

代码

1.页面调用

this.vuex('newMsg', '20')

2.main.js

Vue.prototype.vuex = function(name, value){
  this.$store.commit('$uStore', {
        name,value
      })
}

3. store.js

let lifeData = {};
try{
    lifeData = uni.getStorageSync('lifeData');
}catch(e){
}
let saveStateKeys = ['vuex_user', 'vuex_token'];
const saveLifeData = function(key, value){
    if(saveStateKeys.indexOf(key) != -1) {
        let tmp = uni.getStorageSync('lifeData');
        tmp = tmp ? tmp : {};
        tmp[key] = value;
        uni.setStorageSync('lifeData', tmp);
    }
}

在mutations中写入分解函数

$uStore(state, payload) {
            // 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
            let nameArr = payload.name.split('.');
            let saveKey = '';
            let len = nameArr.length;
            if(len >= 2) {
                let obj = state[nameArr[0]];
                for(let i = 1; i < len - 1; i ++) {
                    obj = obj[nameArr[i]];
                }
                obj[nameArr[len - 1]] = payload.value;
                saveKey = nameArr[0];
            } else {
                // 单层级变量，在state就是一个普通变量的情况
                state[payload.name] = payload.value;
                saveKey = payload.name;
            }
            // 保存变量到本地，见顶部函数定义
            saveLifeData(saveKey, state[saveKey])
        },

这一段是直接从uniapp中复制过来，大家有不懂可以看他们的源码。