v-module綁定vuex裏面的數據

當在嚴格模式中使用 Vuex 時，在屬於 Vuex 的 state 上使用  v-model  會比較棘手：

 

<input v-model="obj.message">

 

假設這裏的  obj  是在計算屬性中返回的一個屬於 Vuex store 的對象，在用戶輸入時， v-model  會試圖直接修改  obj.message 。在嚴格模式中，因爲這個修改不是在 mutation 函數中執行的, 這裏會拋出一個錯誤。

 

用「Vuex 的思惟」去解決這個問題的方法是：給  <input> 中綁定 value，而後偵聽  input  或者  change 事件，在事件回調中調用 action:

 

<input :value="message" @input="updateMessage">

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

 

下面是 mutation 函數：

mutations: {
  updateMessage (state, message) {
    state.obj.message = message
  }
}