如何从Vuex状态中预填充Vue的v-text-field文本框？

问题根因 #

• v-text-field 是 Vuetify 封装的输入组件，输入框的内容完全由 v-model 绑定的变量控制，标签内部写的 {{ currentName }} 插值不会生效，也没有对应插槽承接输入值。
• 你当前 v-model 绑定的 name 初始值为空，也没有和从 Vuex 取数的计算属性 currentName 建立关联，自然无法获取到 store 里的用户姓名做预填充。

解决方案 #

方案1：双向绑定同步回Vuex（适用需要把修改后的姓名同步更新到store的场景）

不需要在 data 里声明name，直接通过计算属性的 get/set 对接 Vuex 即可：

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

computed: {
  name: {
    get() {
      return this.$store.state.name
    },
    set(updatedName) {
      // 此处调用你项目Vuex中更新name的mutation即可
      this.$store.commit('setUserName', updatedName)
    }
  }
}

方案2：仅预填充，修改后不需要同步回store

直接在组件挂载时给 data 里的name赋值即可，如果store中的name是异步获取的，额外加一层监听保证更新：

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

data: () => ({
  name: '', 
}),
mounted() {
  this.name = this.$store.state.name
},
// store的name是异步获取时加以下监听即可
watch: {
  '$store.state.name'(newVal) {
    this.name = newVal
  }
}

内容的提问来源于stack exchange，提问作者Ksharples431