Vuex 計算器構建實例（input 組件）

Vuex 計算器構建實例

最近想熟悉一下這個狀態管理的神器，寫了一下尤大大的小 demo，文檔中說增長一個表單組件和以前的按鈕比起來相對棘手，這裏把遇到的小問題記錄一下。

若是對你有幫助的話,歡迎 star~

個人github ^_^

安裝

環境仍是使用官方的 vue-cli 腳手架進行搭建，廢話很少說。

//    克隆這個項目後輸入如下命令進入開發模式
npm install
npm run dev

Vuex數據流

1. Action決定了對 store 作出什麼樣的修改，好比說經過 dispatch 一個 INCREMENT 的 mutation 進行增長 state.count 值。

2. mutation 函數是來詳細描述修改 store 的過程。

3. 組件再從 store 的 Getter 函數中得到組件須要的數據，最終渲染到組件完成更新。

整個過程清晰明瞭，單向的數據流動和 redux 的理念十分類似。

官網上有 increment 的教程，相對簡單些，這些就略去不談，說說教程上沒有的~

表單組件

教程上說，直接在屬於 Vuex 的 state 上使用 v-model 會比較噁心：

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

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

可是，這個雙向綁定在處理大量表單這種業務上是很是好用的，難道要直接舍掉麼？固然不會~

看代碼先：

<template>
  <div>
    <input v-model="thisMessage" debounce="500">
  </div>
</template>

<script>
  import {updateCounter} from '../vuex/actions'
  import {getCount} from '../vuex/getters'

  export default {
    vuex: {
      getters: {
        counterValue: getCount
      },
      actions: {
        update: updateCounter
      }
    },
    computed: {
      thisMessage: {
        get () {
          return this.counterValue
        },
        set (val) {
          this.update(val)
        }
      }
    }
  }
</script>

以上就是一個包含 input 的表單組件，能夠看到 v-model 和 debounce 這些指令都是正常書寫的，祕訣就是v-model 綁定了一個計算屬性，經過計算屬性的 getter 和 setter 函數觸發 Vuex 的 getters 和 actions 函數，從而避免直接修改state。

這樣也比綁定一個屬性上去再監聽變化少了一步，重要的是 v-model 這樣的指令能夠繼續完美的使用了~