iT邦幫忙

2018 iT 邦幫忙鐵人賽
DAY 3
0
自我挑戰組

Vuex 學習筆記系列 第 13

[Vue.js] Vuex 學習筆記 (13) - 表單處理

表單處理

當在嚴格模式中使用 Vuex 時,state 使用在 v-model 時會遇到問題:

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

假設 obj 是在 computed 屬性中返回一個屬於 Vuex store 的物件,當用戶輸入時 v-model 會試圖直接修改 obj.message,但是在嚴格模式中,由於這個修改不是在 mutation 函數中執行的,所以會拋出一個錯誤。

我們要解決這個問題,需要用 Vuex 的邏輯 來處理,在 <input> 中綁定 value , 然後監聽 inputchange 事件,並且事件中調用 action 。

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

在 store 中的 mutation:

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

雙向綁定的計算屬性

上面的作法比起簡單地使用 v-model + 局部狀態 要麻煩許多,並且也損失了一些 v-model 中很有用的特性。還好,我們可以用另一種方式,使用帶有 setter 的雙向綁定計算屬性:

<template>
  <input v-model="message">
</template>

<script>
// ...
computed: {
  message: {
    get () {
      return this.$store.state.obj.message
    },
    set (value) {
      this.$store.commit('updateMessage', value)
    }
  }
}
</script>

收錄於部落格


上一篇
[Vue.js] Vuex 學習筆記 (12) - 嚴格模式
下一篇
[Vue.js] Vuex 學習筆記 (14) - 購物車實例 component
系列文
Vuex 學習筆記20

尚未有邦友留言

立即登入留言