應用場景
提供一個地址省市區地址聯動操作的應用場景：在地址管理的地址修改、地址添加、選擇送貨區域等邏輯中，會用到該聯動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存入緩存當中。
如上，只需要兩步操作，就可以實現多處調用的一致性。