Vuex变量已正确更新，但未在模板中刷新 store / user.js

如何解决Vuex变量已正确更新，但未在模板中刷新 store / user.js

当我更改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]
  }
}

解决方法

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

您创建一个store目录，并且

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

此外，根据文档，

...您的状态值应始终是避免在服务器端出现不必要的共享状态的函数。

您的状态应如下所示

store / user.js

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

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