有在用 Vue 寫應用程式的人,一定也會接觸到 Vuex,它有很多優點但也有限制, 其中一項就是不能在 Mutation 以外的地方修改 State ,所以也就不能直接使用 v-model 去綁定,雖然官方有提供一段替代的寫法,但還是比原本直接用 v-model 來的麻煩很多,特別是大量的時候。

下面這段是官方提供的替代寫法,相信有用 Vuex 的人遇到這個問題去搜尋時都會看到這段 Code。

這是一般開發者一定都會想到的一個解法,很符合 Vuex 的精神。

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

還有更簡單的寫法嗎?

官方文件最後又提供了另個可以直接用 v-model 的解法。

可以看到,他它使用 Compute 的 Getter 與 Setter 去分開處理 v-model 的讀取與賦予, 比上一段更簡潔,也不破壞 Vuex 的精神。

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

雖然它很簡潔了,但要綁定的量一多,一個個寫 Getter 與 Setter 也是很煩,且他們都是類似行為,應該能抽出來共用?

經過一番搜尋,找到了這個套件 vuex-map-fields , 這是作者將官方那個方法抽成共用方法並包成套件,只要輸入欄位就能使用直接用相同名稱進行綁定。

該套件的範例 Code 如下,可以看到這比官方提供的解法更為簡潔。

<template>
  <div id="app">
    <input v-model="fieldA">
    <input v-model="fieldB">
  </div>
</template>

<script>
import { mapFields } from 'vuex-map-fields';

export default {
  computed: {
    // The `mapFields` function takes an array of
    // field names and generates corresponding
    // computed properties with getter and setter
    // functions for accessing the Vuex store.
    ...mapFields([
      'fieldA',
      'fieldB',
    ]),
  },
};
</script>

甚至是多層的 State 他也能處理,詳細就自己去看 Readme 囉!使用上頗簡單的。

這是到目前為止最佳的解法,也是我最能接受的解法!


感謝閱讀!

喜歡這篇文章或是有幫助到你嗎? 歡迎分享給你的朋友!

有任何問題、回饋或您認為我會感興趣的任何東西嗎? 請在下面發表評論,或者是直接聯絡我


Puck Wang

Puck Wang

Hi! 我是 Puck Wang,這個部落格的作者,是一位全端網站開發者,常使用 PHP、.net Core、Vue 和 React 做開發,你可以在這個部落格看到我精選的筆記內容,希望對你會有所幫助。

更多關於我的訊息,可至關於關於頁面。