与Vuex的2路数据绑定

Question

在下面的代码中，我将2个方法将textarea的输出绑定到p元素中，一次是从组件的内部状态绑定一次，另一次是从Vuex绑定。 Vuex状态确实显示了初始值，但该值不会随着我添加或删除文本而更新（因为它与第一个绑定到内部数据的textarea正确无误）。造成这个问题的区别是什么？

组件代码：

<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型，而是绑定到textarea的:value，然后有一个自定义事件发生变异的输入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并且吸气剂具有相同的计算属性：

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