Vuex 更新状态

Posted 2023-02-22

【中文标题】Vuex 更新状态

【英文标题】：Vuex update state

【发布时间】：2020-05-18 04:35:21

【问题描述】：

当我调用 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

【问题讨论】：

日志在同步流中，此时异步操作可能完成也可能未完成。而是从 then 块内部登录。顺便说一句，不需要getter，您可以将其视为不计算任何内容的computed。

感谢您的回复，您能告诉我您的解决方案吗？对我来说会更明确@Dan

我仍然不知道究竟是什么不起作用。你的 localStorage 总是空的吗？你的 Vuex 商店总是空着吗？

我需要单击两次操作才能使用我不知道为什么的数据集合更新 localStorage.getItem('userDailyFoods')；

我有另一个不需要 axios 调用的操作，它工作得很好

【参考方案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，你可以把它想象成一个不计算任何东西的计算对象。

【讨论】：

当我将控制台日志放在响应中时，@dan 有效，但是当它在我的组件中使用 console.log 时，我的效果与以前相同。需要两次才能正确更新（我更新了帖子）

这意味着您在组件中犯了同样的错误。在异步操作完成之前，您无法登录到控制台（通过使用 then 块）。

第一个控制台日志返回 [ob: Observer] 没有任何内容 第二次点击返回 […, ob: Observer] 和收集数据

如何在我的组件中实现这一点？

设置存储只需单击 1 次，但您正在尝试在完成之前对其进行记录。不要尝试在控制台中记录它，而是尝试使用模板中计算的userDailyFoods，您可能会看到它在完成加载时呈现。