Vue.js 2：不能使用雙向計算屬性結合vuex

Question

我無法獲得雙向計算屬性與vuex結合使用。

如果有輸入更改，我想將getIsUnsavedData設置爲true並將這些更改「複製」/提交到新變量$store.state.authenticatedUser.changedData。在有任何改變之後，我想要輸入get()其值$store.state.authenticatedUser.changedData而不是$store.state.authenticatedUser.data來顯示更改。

在拳頭一切都像預期的一樣工作。如果有輸入更改，則更改的值將在$store.state.authenticatedUser.changedData屬性中複製。 getIsUnsavedData值更改爲true，get（）指向複製的數據。 只剩下一個錯誤。突然，雖然vuex商店正在更新，但計算屬性永遠不會改變。 set()函數仍然被調用，但get()沒有。

<ui-textbox @change="valueChanged" v-model="userName"></ui-textbox> 
// ... 
    computed: { 
    userName: { 
     get() { 
     return this.$store.getters.getIsUnsavedData ? this.$store.state.authenticatedUser.changedData.name : this.$store.state.authenticatedUser.data.name 
     }, 
     set(value) { 
     this.$store.commit('setChangedUserData', { 
      key: 'name', 
      value: value 
     }) 
     } 
    } 
    }, 
    methods: { 
    valueChanged() { 
     this.$store.commit('setUnsavedState', true) 
    } 
    }, 
// .... 

Answer 1

V模型應該指向的數據，而不是一個計算的屬性。一個計算出來的屬性可以產生數據，就像一個吸氣器本身。設置計算屬性毫無意義;它找到了自己的價值。我不確定這個實現如何與Vue自己的反應性和依賴性跟蹤交互，但我懷疑它是問題的根源。

考慮：

<ui-textbox v-model="userName"></ui-textbox>

// ... 
data() { 
    userName: null, 
}, 
computed: { 
    ...mapGetters([ 
    'userData', 
    ]), 
}, 
methods: { 
}, 
watch: { 
    userName() { 
    this.$store.commit('setChangedUserData', { 
     key: 'name', value: this.userName 
    }) 
    }, 
} 
// ... 

我可能會丟失一些關於你在做什麼，但我這是怎麼會開始解決問題。