Vuex 变量正确更新但未在模板中刷新答案

【问题标题】：Vuex variable properly updated but not refreshed in templateVuex 变量正确更新但未在模板中刷新
【发布时间】：2020-12-04 20:17:28
【问题描述】：

当我更改 v-text-field 的值时，我可以从开发人员工具的 Vue 选项卡中看到 lastName 的值在 user 存储中更新，代码如下。但是，出于某种原因，我在下面的模板中的 3 个测试的值没有更新（或同步）。为什么？我的代码有什么问题？

pages/home.vue:

<template>
  <v-container>

    <v-container>
      <v-row>
        <v-col>
          <v-text-field v-model="lastName" />
        </v-col>
      </v-row>
    </v-container>

    TEST 1:
    {{ $store.state.user.last_name }}

    TEST 2:
    {{ lastName }}

    TEST 3:
    <v-text-field v-model="lastName" />

  </v-container>
</template>

<script>
export default {
  computed: {
    lastName: {
      get() {
        return this.$store.state.user.last_name
      },
      set(value) {
        this.$store.commit('user/UPDATE_PROP', ['last_name', value])
      }
    }
  }
}
</script>

store/user.js

export const mutations = {
  UPDATE_PROP(state, payload) {
    state[payload[0]] = payload[1]
  }
}

【问题讨论】：

请分享您的商店状态和您要将突变导出到的文件（即您的用户模块）。如果您可以发布初始化商店的位置，那也会很有帮助。
与观察者一起，您可以跟踪您的商店变化https://stackoverflow.com/questions/43270159/vue-js-2-how-to-watch-store-values-from-vuex
@Tony 我没有在我的store/user.js 中设置存储state，该变量是由突变创建的，并且显式设置export const state = () => ({ last_name: '' }) 并不能解决问题。
我认为这就是问题所在。 Vuex 存储状态是响应式的，就像 Vue 实例中的 data 属性和在突变中设置存储变量不会触发重新渲染一样。请发布您所拥有的内容，以便我查看是否需要更正。我强烈怀疑问题出在您的设置上。 @DevonDahon
@Tony 这是我所有的代码......我正在使用 Nuxt。我想我的问题必须与this 联系，但我不知道如何解决它。

标签： vuex vuetify.js nuxt.js

【解决方案1】：

我认为问题在于您设置商店的方式。根据 Nuxt documentation，

您创建一个store 目录并

store 目录中的每个 .js 文件都被转换为命名空间模块（索引是根模块）。

另外，根据文档，

...您的状态值应该始终是一个函数，以避免在服务器端出现不需要的共享状态。

你的状态应该是这样的

存储/user.js

export const state = () => ({
  last_name: ''
})

export const mutations = {
  UPDATE_PROP(state, payload) {
    state[payload[0]] = payload[1]
  }
}

【讨论】：