Vuex詳解---快速理解

Vuex是什麼，個人理解是vue.js中集中管理狀態的一種模式。官網解釋：Vuex是一個專爲Vue.js應用程序開發的狀態管理模式。它採用集中式存儲管理應用的所有組件的狀態並以相應的規則保證狀態以一種可預測的方式發生變化。

如果構建的應用比較簡單，沒有必要使用vuex，簡單的單向數據流就能滿足產品需求，體現單向數據流的簡潔性，如下：

 <template>
  <div>{{count}}</div>
  <el-button @click="increment ">count</el-button>
</template>

new Vue({
  data () {
    return {
      count: 0
    }
  },
  methods: {
    increment () {
      this.count++
    }
  }
})

適用場景：

如果應用是小型的、組件不多、組件之間的狀態依賴不多、結構清晰便於維護，組件之間很少有數據之間的關聯，這樣的情況，沒必要使用vuex。
相反，哪些比較大型的應用，多個視圖組件共用一個狀態，一個組件的修改，需要更新其它關聯的組件，此時Vuex比較適用。類似商城系統、外賣系統等。

Vuex的使用：
安裝vuex，在項目中執行命令：npm install vuex --save-dev 或者使用淘寶鏡像 cnpm install vuex --save-dev

創建文件&&書寫代碼部分：

1、創建文件夾store，然後在裏面創建文件store.js,並引入相關文件：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
import * as actions from './actions'
import mutations from './mutations'
import state from './state'
Vue.use(Vuex)
// 註冊上面引入的各大模塊
const store = new Vuex.Store({
  state,
  getters,
  actions,
  mutations,
  state
})
export default store// 導出store並在 main.js中引用註冊。

2、創建文件state.js,代碼如下：

const state = {
  count: 0,
  countNumber: 10
}
export default state

3、創建文件actions.js，代碼如下：

export function count ({commit}, name) {
  return commit('count', name) // 觸發mutations中的方法&&傳值
}

4、創建文件getters.js。(我的理解是store的計算屬性)

const getters = {
  countNumber (state) {
    state.countNumber+=2 // state中countNumber字段發生變化，就會觸發該方法
    return state.countNumber
  }
}

5、創建文件mutations.js，代碼如下：

const mutations = {
  count (state, num) { // num爲dispatch傳遞的參數
    state.count+=num
    state.countNumber+=num
  }
}
export default mutations

6、main.js文件，需要引入store：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store/store.js' // 導入文件store

Vue.config.productionTip = false
/* eslint-disable no-new */
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

7、文件HelloWorld.vue中的相關操作：

<template>
  <div class="hello">
      <div class="addClsFather">
          <div class="addCls" @click="addFuc">
              Add
          </div>
          <div>
              未使用vuex：{{count}}
          </div>
          <div>
              使用vuex：{{this.$store.state.count}}
          </div>
          <div>
              計算屬性getters：{{countNumber}} &yen;
          </div>
      </div>
  </div>
</template>
<script>
import { mapGetters } from 'vuex'
export default {
  name: 'HelloWorld',
  data () {
    return {
      count: 0
    }
  },
  computed: mapGetters([
    'countNumber'
  ]),
  methods: {
    addFuc() {
        this.count++
        this.$store.dispatch('count', 5) // 觸發action中的方法&&傳值
    }
  }
}
</script>
<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
.addClsFather {
    margin: 50px 100px;
}
.addCls {
    cursor: pointer;
    width: 100px;
    height: 30px;
    line-height: 30px;
    background-color: blue;
    text-align: center;
    color: #fff;
    border-radius: 5px;
}
</style>

整體思路：

1、在文件HelloWorld.vue中，點擊"Add"按鈕，通過dispatch觸發action並傳值；
2、在action中，觸發mutations中的方法並傳值；
3、通過mutations改變state中的字段值；
4、對於使用了getters的字段，在state中的該字段改變後，會觸發getters，並進行相關的處理(getters可以理解爲state的計算屬性);
5、state、getters改變後，渲染到DOM中。
注：在使用getters的字段，需要在相關關的(HelloWorld.vue)頁面引入mapGetters字段，並添加computed屬性，如下(不使用computed屬性，不會起作用)：

computed: mapGetters([
    'countNumber'
]),

以上是對vuex整體的摘要，下期分析vuex中的mapState，mapGetters,mapMutations,mapActions