Vuex 更新状态

Question

当我调用 Vuex 操作并执行 axios 请求时，它并没有更新我所有的 localStorage 项目，这很奇怪。

我的 axios 请求可能返回对象或空集合，我想一直更新我的 userDailyFoods 项目。我控制台记录了我的突变和吸气剂，它可以工作，但是对于 localStorage 项目的更新，它是错误的。有时我得到结果，有时没有。

我做错了什么？

动作：

updateUserDailyFoods(context, data) {
  let date = data.data
  if (date) {
    axios.get(`/user/daily/food/${context.getters.user.id}/${date}/`).then(r => {
      context.commit('userDailyFoods', {
        userDailyFoods: r.data.data
      });
      localStorage.setItem('userDailyFoods', JSON.stringify(r.data.data));
    }).catch(e => {
      console.log(e)
    })
  }
  console.log(localStorage.getItem('userDailyFoods'));
}

突变：

userDailyFoods (state, payload) {
  if(payload) {
    state.userDailyFoods = payload.userDailyFoods
  }
},

吸气剂：

userDailyFoods(state){
  return state.userDailyFoods
}

状态：

userDailyFoods: JSON.parse(localStorage.getItem('userDailyFoods')) || [],

更新

当我转到我的视图组件时

computed: {
  userDailyFoods() {
    return this.$store.state.userDailyFoods
  },
}

然后我控制台记录我的操作：

console.log(this.userDailyFoods)

那么结果会在两次点击后更新，而不仅仅是一次。

getDaySelected(day) {
  var day = moment(day).format('YYYY-MM-DD');
  this.$store.dispatch('updateUserDailyFoods', {
    data: day
  })
  console.log(this.userDailyFoods)
  this.$parent.$data.foods = this.userDailyFoods
}

Answer 1

（按要求回答）该值可能每次都在 localStorage 中设置，但您试图在异步 Axios 操作完成之前记录它。将console.log 移动到then 块中：

.then(r => {
    context.commit('userDailyFoods', {userDailyFoods: r.data.data});
    localStorage.setItem('userDailyFoods', JSON.stringify(r.data.data));
    console.log(localStorage.getItem('userDailyFoods'));
})

Axios（和一般的 AJAX）是异步的，这意味着操作与正常的同步代码流分开开始。在它开始之后，程序执行会立即恢复，通常是在异步操作完成之前。在您登录到控制台时，无法保证此异步承诺已解决。

顺便说一句，不需要那个 getter，你可以把它想象成一个不计算任何东西的计算对象。