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存入缓存当中。
如上，只需要两步操作，就可以实现多处调用的一致性。
