Vuex 更新状态 [英] Vuex update state

问题描述

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

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

我做错了什么?

动作:

updateUserDailyFoods(context, data) {让日期 = data.data如果(日期){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 => {控制台日志(e)})}console.log(localStorage.getItem('userDailyFoods'));}

突变:

userDailyFoods(状态，有效载荷){如果(有效载荷){state.userDailyFoods = payload.userDailyFoods}},

获取者:

userDailyFoods(state){返回 state.userDailyFoods}

状态:

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

<块引用>

更新

当我转到我的视图组件时

计算:{userDailyFoods() {返回 this.$store.state.userDailyFoods},}

我控制台记录我的操作:

console.log(this.userDailyFoods)

然后在两次点击后更新结果，而不是一次.

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

解决方案

(Answer as required) 该值可能每次都在 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，你可以把它想象成一个不计算任何东西的计算器.

When I'm calling a Vuex action and perform an axios request, it's not updating all my localStorage item, it's very strange.

My axios request could return objects or an empty collection and I would like to update all the time my userDailyFoods item. I console log my mutation and getter and it works but for the update of the localStorage item it's bugging. Sometimes I get the result, sometimes not.

What am I doing wrong ?

action:

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'));
}

mutation:

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

getter:

userDailyFoods(state){
  return state.userDailyFoods
}

state:

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

UPDATED

when i go to my view component

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

and I console log my action:

console.log(this.userDailyFoods)

then the result is updated after two clicks, not only one.

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 as requested) The value is probably being set in localStorage every time, but you're trying to log it before the async Axios operation has completed. Move the console.log into the then block:

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

Axios (and AJAX in general) is asynchronous which means that the operation begins separately from the normal synchronous flow of code. After it begins, program execution immediately resumes, often before the async operation is complete. At the time you are logging to the console, there is no guarantee that this async promise is resolved yet.

As an aside, there is no need for that getter, which you can think of as a computed that isn't computing anything.

这篇关于Vuex 更新状态的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！