用Vuex进行2路数据绑定

Question

在下面的代码中，我有两种方法将文本区域的输出绑定到ap元素，一次是从组件的内部状态，一次是从Vuex。Vuex状态确实显示了初始值，但是当我添加或删除文本时，该值不会更新（因为在绑定到内部数据的第一个文本区域中正确执行了该操作）。造成此问题的区别是什么？

组件代码：

<template>
  <div>
    <div>
      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="internal_state"></textarea>
      <p> {{ internal_state }}</p>
      <hr>

      <textarea name="textarea1" id="txtid" cols="40" rows="30" v-model="this.$store.state.vuex_state"></textarea>
      <p> {{ this.$store.state.vuex_state }}</p>
      <hr>

    </div>
  </div>
</template>

<script>

  export default {
    name: 'WriteArea',
    data () {
      return {
        internal_state: ''
      }
    },
    methods: {


    }
  }

</script>

Vuex代码：

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

Vue.use(Vuex)

export const store = new Vuex.Store({
  strict: true,
  state: {
    counter: 0,
    vuex_state: 'starting string'
  },
  getters: {
    vuex_getter1: (state) => {
      return state.vuex_string
    }
  }
})

Answer 1

Vuex状态应通过突变进行更新。有关此确切问题，请参阅文档。解决方案不是使用v模型，而是绑定到的:value，textarea然后有一个自定义事件来更改输入的Vuex状态：https ://vuex.vuejs.org/en/forms.html

<input :value="message" @input="updateMessage">
// ...
computed: {
  ...mapState({
    message: state => state.obj.message
  })
},
methods: {
  updateMessage (e) {
    this.$store.commit('updateMessage', e.target.value)
  }
}

另一个选择是在相同的计算属性中创建一个setter和getter：

<input v-model="message">
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}