從 0 過渡到 vuex，漸進式給你講述爲何要用vuex

1. 前言鋪墊

若是看完本文後，還對vuex傻傻分不清，不清楚 state,Getter,Mutation,Action,Module , 那麼請回復我 wx 15932639097 ，必定是我寫的還不夠清晰，我來改

• 計時器都知道吧

<template>
  <div>
    <button @click="add">+1</button>
    <p>數值如今是 ：{{count}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count : 0
    }
  },
  methods : {
    add() {
      this.count++
    }
  }
}
</script>

---

如今咱們要把計時的功能抽象出一個組件

<!-- 父組件 -->
<template>
  <div>
    <button @click="add">+1</button>
    <z-add></z-add>
  </div>
</template>
<script>
import add from '@/components/add.vue'
export default {
  components:{
    "z-add":add
  }
}
</script>

<!-- add.vue 子組件 -->
<template>
  <div>
    <p>數值如今是 ：{{count}}</p>
  </div>
</template>
<script>
export default {
  data() {
    return {
      count : 0
    }
  }
}
</script>

---

• 上面的那個實現出來很難，我看着教程都沒有實現出來，並且還只是一個而已，要是父組件中調用多個例如20個子組件呢，每一個子組件都須要傳遞給父組件一些值，那這個業務是至關的賦值和頭疼了

vuex實現上面的代碼邏輯

<!-- main.js 引用vuex -->
import vuex from 'vuex'
Vue.use(vuex);
var store = new vuex.Store({//store對象
    state:{
        count : 0
    }
})

<!-- 父組件 -->
<template>
  <div>
    <button @click='$store.state.count++'>+1</button>
    <z-add></z-add>
  </div>
</template>
<script>
import add from '@/components/add.vue'
export default {
  components:{
    "z-add":add
  }
}
</script>

<!-- 子組件 -->
<template>
  <div>
    <p>數值如今是 ：{{$store.state.count}}</p>
  </div>
</template>
<script>
export default {

}
</script>

---

2. vuex (modules)

前面爲了方便 , 咱們把 store 對象寫在了 main.js 裏面 , 但實際上爲了便於往後的維護 , 咱們分開寫更好 , 咱們在 src 目錄下 , 新建一個 store 文件夾 , 而後在裏面新建一個 index.js :

<!-- src/store/index.js -->
import Vue from 'vue'
import vuex from 'vuex'
Vue.use(vuex);
export default new vuex.Store({
    state:{
      count : 0
    }
})

<!-- mian.js -->
import store from '@/store/index.js'

new Vue({
  store,
  ......
}).$mount('#app')

這樣就把 store 分離出去了 , 那麼還有一個問題是 : 這裏 $store.state.count 不管哪一個組件均可以使用 , 那組件多了以後 , 狀態也多了 , 這麼多狀態都堆在 store 文件夾下的 index.js 很差維護怎麼辦 ?

咱們可使用 vuex 的 modules , 在 store/index.js 下新建文件夾 modules ，把業務抽離出去

<!--index.js-->
...
import add from './modules/add'
import addceshi from './modules/addceshi'

export default new vuex.Store({
    modules : {
      add,
      addceshi
    }
})

<!-- modules/add.js -->
export default {
  state : {
    count : 0
  }
}

<!-- modules/addceshi.js -->
export default {
  state : {
    count : 100
  }
}

<!-- 使用舉例 ：add.vue -->
<template>
  <div>
    <p>數值如今是 ：{{$store.state.addceshi.count}}</p>
  </div>
</template>
<script>
export default {

}
</script>

---

3. mutations

前面咱們 加法案例 , 咱們對vuex 的依賴僅僅只有一個 $store.state.add.count 一個狀態 , 可是若是咱們要進行一個操做 , 須要依賴不少不少個狀態 , 那管理起來又麻煩了

通俗的理解mutations,裏面裝着一些改變數據方法的集合，這是Veux設計很重要的一點，就是把處理數據邏輯方法所有放在mutations裏面，使得數據和視圖分離。切記：Vuex中store數據改變的惟一方法就是mutation

<!--
    舉個例子吧，咱們除了count這個一個狀態以外，再加一個，例如 addzhuangtai : ture ，當爲 true時候爲 count 爲1 ，爲 false 時，count 爲 0
-->