如何从 Vuex 状态预填充 Vue 文本字段？答案

【问题标题】：How do you prepopulate a Vue text field from Vuex state?如何从 Vuex 状态预填充 Vue 文本字段？
【发布时间】：2021-10-20 17:17:40
【问题描述】：

我正在尝试在下面的文本字段中预填充用户名。

<v-text-field
    v-model.trim="name"
>{{ currentName }}</v-text-field> 

data: () => ({
    name: '', 
  }),
  computed: {
    currentName() {
      return this.$store.state.name
    },
  }

我觉得我错过了一些非常简单的东西，但是我尝试了很多变化，以至于我完全被难住了。请并感谢您的帮助！

【问题讨论】：

您需要使用this.$store.state.name 来补充name 属性
对 name 计算属性使用 getter 和 setter。 Getter 将返回存储状态，而 setter 可能应该在您的 VueX 存储中发送一个动作或提交一个更新存储状态的突变。同样根据您的评论，您似乎尚未配置 VueX 商店。

标签： vue.js input vuex auto-populate

【解决方案1】：

@Terry 你明白了！谢谢！

<v-text-field
  v-model.trim="getName">{{ getName }}</v-text-field>

data: () => ({ name: '' })

computed: {
    getName: {
      get: function() {
        return this.$store.state.name
      },
      set: function(newValue) {
        this.name = newValue
      }
    }

methods: {
    submit() {
      if(!this.name) {
        this.name = this.$store.state.name
      } 
      this.$store.dispatch('updateMe', {
        name: this.name,
      });
    }

export default new Vuex.Store({
  state: {
    name: null,
  }

【讨论】：