vuex异步获取数据_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 里获取数据

按照原文应该是这么写吧

getters: {

// 如果数据已经存在就直接返回，如果不存在就先通过action获取

// 全局只获取一次

address(state){

if (state.address.length == 0) {

store.dispatch('getArr');

}

return state.address

}

}