vuex数据管理－数据共享

应用场景

提供一个地址省市区地址联动操作的应用场景：在地址管理的地址修改、地址添加、选择送货区域等逻辑中，会用到该联动picker。在地址picker操作中，需要请求省份列表，下面以省份列表的操作为例。

数据共享实现思路

利用vuex，通过查找vuex中是否存在省级列表，如果存在，则直接取list；如果不存在，则调用相应的接口取数据。

单一业务数据流控制方法

我们会把从后端取到的list存在state中，实现数据状态的共享，但取原始数据的方法、存vuex的方法，可能会放在各自的业务当中。如此，使得相同数据的逻辑虽然一样，但是会存在多份代码实现。这就是数据共享做得不够彻底，导致当数据结构或者存取逻辑发生变化的时候，各个业务逻辑也都要相应的发生变化，且list的state状态，可能会出现不可控的情况。

最佳的方式

将整个list的存取逻辑，同状态一起放入vuex当中，实现真正的数据共享。

地址的操作无非就是增、删、改、查～～将这些操作封装在vuex当中，实现对state的相应操作，将其提供给视图，将保持数据的一致性，也使得数据流更为清晰。

以取地址省份列表为例，代码如下：

\\ vuex
const state = {
    list: []
    // list: [{
    //     province: '北京市', // 市名
    //     provinceCode: '110000' // 对应code码
    // }]
}
// 仅举例，可进行统一格式化
const getters = {
    provinceList(state) {
        return state.list
    }
}
const actions = {
    // const GETROVINCELIST = 'getProvinceList'
    [nActions.GETPROVINCELIST]({commit, state}, params) {
        if (state.list.length) {
            return
        }
        getProvinceList(params).then(({success, result}) => {
            if (success) {
                commit(nMutations.UPDATEROVINCELIST, result.deliverList)
            }
        })
    }
}
const mutations = {
    // const UPDATEROVINCELIST = 'updateProvinceList'
    [nMutations.UPDATEROVINCELIST](state, list) {
        if (list.length) {
            list.map((item) => {
                if (!item.province) {
                    return Object.assign(item, {
                        province: '',
                        provinceCode: 0
                    })
                }
            })
        }
        state.list = list
    }
}

export default {
    state,
    getters,
    actions,
    mutations
}

如代码所示，步骤如下：

• step1：定义数据初始化状态，将数组属性细节使用注释的形式，放在state中，有利于开发者往后维护时，进行对照；
  

• step2：使用actions的getProvinceList方法，实现取provinceList的逻辑，先查找state中，如果存在地址列表，则不发送数据请求；如果不存在，则向后端请求。
  

• step3：使用mutations的updateAddressList方法，将取到的地址列表进行格式化，再存入state中；避免在业务端进行格式化处理；
  

• step4：可通过getters获取数据。（这里的获取简单，并不需要进行相应处理，只是举例）
  

如此，便将取的逻辑与数据状态都存入到了vuex当中共享。如果因性能优化等，需要进行逻辑调整，不需要改动业务逻辑，仅需要在相应的方法中进行处理即可。如，省级列表数据，基本万年不变，所以可以直接存本地缓存，先判断本地缓存中是否存在，再进行相应的存取。在该共享模式下，需要做的操作如下：

• step1：在actions的getProvinceList的方法中，最开始的位置，增加判断本地缓存的操作；
  

• step2：然后在获取后端数据的位置，将取到的provinceList存入缓存当中。
  

如上，只需要两步操作，就可以实现多处调用的一致性。