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

【问题标题】：NUXT Properties from Vuex are not getting updated in DOM when using async actions使用异步操作时，来自 Vuex 的 NUXT 属性不会在 DOM 中更新
【发布时间】：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 中运行良好。你能分享一个重现问题的链接吗？
我实际上已经想通了，我在开发过程中使用自动谷歌翻译将我的项目翻译成英文，这可能会干扰它。感谢您对其进行故障排除。

标签： javascript vue.js nuxt.js vuex store

【解决方案1】：

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

【讨论】：