vuex中,actions获取的数据还没有回来,getters就已经去执行了
时间: 2024-03-21 09:40:17 浏览: 63
vue中在vuex的actions中请求数据实例
5星 · 资源好评率100%
在 Vuex 中,getters 是用于获取 state 的计算属性,而 actions 则是用于异步修改 state 的方法。如果在 getters 中访问的 state 数据还没有被 actions 获取到,就会导致 getters 计算属性的值不正确。
为了避免这种情况,可以在 actions 中使用 Promise 对象来获取异步数据,然后在 getters 中使用 computed 属性来等待 Promise 对象完成,再返回计算属性的值。例如:
```
const store = new Vuex.Store({
state: {
todos: []
},
actions: {
fetchTodos({ commit }) {
return new Promise((resolve, reject) => {
fetch('/todos')
.then(response => response.json())
.then(todos => {
commit('setTodos', todos)
resolve()
})
.catch(error => reject(error))
})
},
},
mutations: {
setTodos(state, todos) {
state.todos = todos
},
},
getters: {
completedTodos(state) {
return new Promise((resolve, reject) => {
const timer = setInterval(() => {
if (state.todos.length > 0) {
const completedTodos = state.todos.filter(todo => todo.completed)
clearInterval(timer)
resolve(completedTodos)
}
}, 100)
})
},
},
})
```
在上面的代码中,我们使用 Promise 对象来等待异步数据的获取,在 getters 中使用了 setInterval 函数来轮询 state.todos,直到获取到数据后再返回计算属性的值。
希望以上解答能够帮到你。如果你还有其他问题,请继续提问。
阅读全文