使用异步操作时，来自 Vuex 的 NUXT 属性不会在 DOM 中更新

Posted 2023-03-16

【中文标题】使用异步操作时，来自 Vuex 的 NUXT 属性不会在 DOM 中更新

【英文标题】：NUXT Properties from Vuex are not getting updated in DOM when using async actions

【发布时间】：2021-11-18 11:21:35

【问题描述】：

出于演示目的，我创建了一个小型测试页面和商店。根据代码，它应该显示 count = 1，然后 500 毫秒后 count = 2 作为 store 更新。

这是我的 test.vue：

<template>
  <div>count =  count </div>
</template>

<script>
import  mapGetters  from "vuex";

export default 
  layout: "test",
  computed: 
    ...mapGetters( count: "test/count" ),
  ,
  mounted() 
    this.$store.dispatch("test/updateCount");
  ,
;
</script>

存储/test.js

export const state = () => (
  count: 1
);

export const getters = 
  count(state) 
    return state.count;
  
;

export const actions = 
  updateCount(context) 
    setTimeout(() => 
    context.commit("setCount", 2);
    , 500);
  
;

export const mutations = 
  setCount(state, value) 
    state.count = value;
  
;

但结果在 DOM 中总是 count = 1

在 vue devtools 中，vuex 绑定和 vuex 状态都显示 count = 2，但在 DOM 中没有更新。

但是，如果我在操作中删除 setTimeout 函数，它会起作用。

我做错了吗？

【问题讨论】：

您的代码在demo 中运行良好。你能分享一个重现问题的链接吗？

我实际上已经想通了，我在开发过程中使用自动谷歌翻译将我的项目翻译成英文，这可能会干扰它。感谢您对其进行故障排除。

【参考方案1】：

我在一个日本网站上工作，所以我在开发过程中打开了谷歌翻译，这可能会干扰它。我把它关掉了，它现在可以工作了！