Vuex与v-model绑定失效求助：textarea双向绑定异常排查

嘿，你用计算属性get/set对接Vuex和v-model的思路完全正确！没成功的话大概率是几个容易忽略的小细节，咱们一步步捋：

1. 先检查Vuex State的初始化 #

这是最容易踩的坑：你的store里state.userInput必须要有初始值！如果没初始化，第一次渲染时getter会返回undefined，textarea的v-model绑定会直接失效。
正确的State初始化应该是这样：

// store/index.js
state: {
  userInput: '' // 一定要给初始值，空字符串就行
},
getters: {
  userInput: state => state.userInput
}

2. 验证Mutation是否真的被触发 #

你的Mutation写法看起来没问题，但可以加个日志确认它有没有被调用：

updateUserInput: (state, newUserInput) => {
  console.log('Mutation已触发，新输入值：', newUserInput)
  state.userInput = newUserInput
}

打开浏览器控制台，在textarea里打字，如果看不到这条日志，那要么是计算属性的set方法写错了（比如拼错了updateUserInput这个Mutation名称），要么是组件根本没拿到Vuex的实例。

3. 确认组件能访问到Vuex Store #

得保证你的根组件已经正确注入了Vuex，不然组件里的this.$store会是undefined，get和set自然都没用。根实例的代码应该像这样：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

new Vue({
  store, // 这里必须注入store实例
  render: h => h(App)
}).$mount('#app')

4. 检查Getter的名称是否匹配 #

确保你在计算属性里调用的this.$store.getters.userInput，和Vuex里定义的Getter键名完全一致，别出现拼写错误（比如把userInput写成userinput）。

完整可运行示例 #

如果上面的点都没问题，你的代码应该就能正常工作了，这里给个完整参考：

组件代码 #

<template>
  <textarea 
    class="text-area size19" 
    rows="10" 
    v-model="userInput" 
    aria-label="With textarea" 
    placeholder="The more keywords you add, the better..." 
  ></textarea>
</template>

<script>
export default {
  computed: {
    userInput: {
      get() {
        return this.$store.getters.userInput;
      },
      set(value) {
        this.$store.commit("updateUserInput", value);
      }
    }
  }
}
</script>

Vuex Store代码 #

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInput: ''
  },
  getters: {
    userInput: state => state.userInput
  },
  mutations: {
    updateUserInput: (state, newUserInput) => {
      state.userInput = newUserInput
    }
  }
})

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