初步認識Vuex

Vuex是什麼？

• 官方解釋
  Vuex是一個專為Vue開發的應用程式的狀態管理模式，它採用集中式儲存管理應用的所有元件的狀態，並以相應的規則保證狀態以一種可預測的方式發生變化。
• 我的理解
  Vuex採用類似全域性物件的形式來管理所有元件的公用資料，如果你想想修改這個全域性物件的資料，是可以的，但沒那麼簡單，你得按照Vuex提供的方式來修改，不能自己隨意用自己的方式來修改。

Vuex的好處

• 狀態儲存是響應式：當 Vue 元件從 store 中讀取狀態的時候，若 store 中的狀態發生變化，那麼相應的元件也會相應地得到高效更新。
• 不能隨意修改Vuex的狀態
  ：改變 store 中的狀態的唯一途徑就是顯式地提交 (commit) mutation。

Vuex的適用場景

不是所有使用vue開發的SPA（single page application）單頁應用都適合採用Vuex。如果你的應用是個小型的應用，元件不多，元件之間的狀態依賴不多，關係清晰容易維護，也就是說不同元件之間很少有資料之間的關聯的話，那麼你大可不用Vuex來開發。反之，如果你開發的是較大型的應用，出現多個檢視元件共同依賴一個狀態，這個狀態相當於我們的全域性物件資料，其他元件的改動，會影響到它，反之，它的修改也需要更新其他關聯的元件，那麼Vuex就很適用。比如：商城系統，外賣系統等等。

理解Vuex的核心概念

Store

要使用Vuex，我們要建立一個例項 store ，我們稱之為倉庫，利用這個倉庫 store 來對我們的狀態進行管理。

//建立一個 store
 const store = new Vuex.Store({});

State

Vuex 使用單一狀態樹，用一個物件State包含了整個應用層級的所有狀態，你可以理解為這些狀態就是一堆全域性變數和資料。

//建立一個 store
 const store = new Vuex.Store({
    //state儲存應用層的狀態
    state:{
        count:5  //總數：5
    }
 });
 

上面的例子中，假設我們有一個全域性狀態count的值為5。那麼，我們就可以將其定義為 state 物件中的key和value，作為全域性狀態供我們使用。

Getter

還記得Vue中的計算屬性computed 嗎？當我們需要在data的基礎上再派生一些狀態的時候，就會使用computed 來實現。同樣，當我們需要從 state 中派生出一些狀態的時候，就會使用到getters，你可以將 getters 理解state的計算屬性。

getters 接受 state 作為其第一個引數：

const store = new Vuex.Store({
   //state儲存應用層的狀態
   state:{
      count:5  //總數：5
    },
    //派生出來的狀態
   getters:{
      //ES6 的箭頭函式語法
    newCount:state => state.count * 3
    }
 });

假設我們要在state.count的基礎上派生出一個新的狀態newCount出來，就適合使用我們的getters

Mutation

Vuex相比傳統的全域性變數有兩個優勢，其中一個是Vuex中的狀態不能隨意修改，要修改必要按照Vuex提供的方式才能修改。

Vuex給我們提供修改倉庫 store 中的狀態的唯一辦法就是通過提交 mutation。我們來看看如何定義一個mutation：

const store = new Vuex.Store({
    //state儲存應用層的狀態
    state:{
        count:5  //總數：5
    },
    //更改store狀態的唯一途徑
    mutations:{
        increment(state){
            state.count ++;
        }
    }
 });

我們再 mutations 中定義了一個叫increment的函式，函式體就是我們要進行更改的地方，可以看到，我們只是簡單地對 state 中的count進行了自增運算。

使用mutations：
非常簡單，Vuex要求我們要想通過 mutations 更改內容，就必須提交 mutation，語法如下

//提交一個名為increment的mutation
store.commit('increment');

我們再提交commit時候，字串引數increment,就是對應在mutations中的increment。

此外，store.commit( ) 還接受其他額外的引數，比如：

 //...
 //更改store狀態的唯一途徑
 mutations:{
    increment(state,n){
        state.count += n;
    }
 }
 //...
 store.commit('increment',10);

Action

Action 類似於 mutation，不同在於：

• Action 提交的是 mutation，而不是直接變更狀態。
• Action 可以包含任意非同步操作，通過 store.dispatch 方法觸發

actions: {
    increment (context) {
      context.commit('increment')
    }
  }
//...
store.dispatch('increment')

mutation都是同步事務，而非同步操作需要在action中處理，看官方文件對於action的講解非常易懂，這裡對action不做具體介紹。

使用Vuex實現一個簡單的計算器

要實現的效果如圖：

• 自定義keyboard元件

<template>
  <div class="val-cont" @click="getKeyboardValue" :data-value="val">
    {{val}}
  </div>
</template>

<script type="text/ecmascript-6">
  export default {
    props: {
      val: ''
    },
    methods: {
      getKeyboardValue (event) {
        let value = event.target.dataset.value
        this.$store.commit('calculate', value)
      }
    }
  }
</script>

<style lang="scss" scoped>
  //...
</style>

• 建立store

 const store = new Vuex.Store({
    state:{
       result:"",//運算結果
       enter:""  //輸入的值
    }
 });

• 定義名為calculate的mutations

const mutations = {
  calculate: (state, value) => {
    if (value === '=') {
      state.result = evil(state.enter)
      state.enter += value
    } else if (value === 'clear') {
      state.result = state.enter = ''
    } else {
      state.enter += value
    }
    // 代替eval,eslint禁用eval
    function evil (fn) {
      var Fn = Function
      return new Fn('return ' + fn)()
    }
  }
}

• 頁面佈局以及使用修改mutations

<template>
  <div class="calu clear">
    <div class="result">
      <!--計算結果：-->
      {{result}}
    </div>
    <div class="enter">
      <!--輸入式子-->
      {{enter == "" ? 0 : enter}}
    </div>
    <div class="list">
      <keyboard v-for="item in keys" :val="item"></keyboard>
    </div>
  </div>
</template>

<script>
  import Keyboard from '../../components/keyboard.vue'
  export default{
    components: {
      Keyboard
    },
    data () {
      return {
        keys: ['clear', '+', '-', '*', '/', '0', '1', '2', '3',
          '4', '5', '6', '7', '8', '9', '='
        ]
      }
    },
    computed: {
      result () {
        //通過this.$store獲取倉庫的資料result
        return this.$store.state.result
      },
      enter () {
        //通過this.$store獲取倉庫的資料enter
        return this.$store.state.enter
      }
    }
  }
</script>

<style lang="scss" scoped>
  //...
</style>

• 執行效果
  

Vue爬坑之路還很漫長