與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) 
    } 
    } 
}