vuex中如何优雅的通过getters获取异步的数据，只获取一次不要重复获取

场景

项目中多个页面和组件都要使用后端返回的地址数组，希望把数组保存在store中，任意组件或者页面需要使用地址信息，则直接this.$store.getters.address即可

伪代码实现

state: {
address: []
},
mutations: {
setAddress(state, data) {
state.address = data;
}
},
action: {
// 异步接口获取后端地址数组
async getArr({commit},arg){
let arr = await (await fetch('API')).json();
commit('setAddress',arr);
}
},
getters: {
// 如果数据已经存在就直接返回，如果不存在就先通过action获取
// 全局只获取一次
if (state.address.length == 0) {
store.dispatch('getArr');
}
return state.address
}

问题

这样写的代码会提示getters中的store没有定义，查阅官网和社区，都建议不要在getters中更改数据，如果不能在getters通过action设置数据的话，如何优雅的实现这个要求呢

参考案例https://mp.weixin.qq.com/s/4X...

回答

我觉得可以在main.js 里获取数据，这样每次都刷新都会重新获取数据，如果用到路由守卫的的也可以放在router.beforeEach 里获取数据

vuex中如何优雅的通过getters获取异步的数据，只获取一次不要重复获取
按照原文应该是这么写吧

getters: {
   // 如果数据已经存在就直接返回，如果不存在就先通过action获取
   // 全局只获取一次
   address(state){
        if (state.address.length == 0) {
            store.dispatch('getArr');
        }
        return state.address
   }
}

以上是 vuex中如何优雅的通过getters获取异步的数据，只获取一次不要重复获取 的全部内容， 来源链接： utcz.com/a/58720.html

回到顶部