vuex總結

vuex，是vue的狀態管理模式，至關於一個倉庫，倉庫裏的數據等.在全部的組件中都可以訪問，

使用時機：在咱們開發一箇中大型應用時，組件之間來回傳值會至關麻煩，這時就須要用到vuex；相反若是隻是一個簡單的Demo練習，使用vuex則顯得繁瑣冗餘

npm安裝：npm install vuex --save

使用方法

　　vuex須要在main.js中註冊，並將store掛載到vue實例上

　　　　import Vuex from 'vuex'
　　　　Vue.use(Vuex)
　　　　let store = new Vuex.Store({
　　　　　　state: {}, // this.$store.state.***
　　　　　　mutations: {},// this.$store.commit('方法名', '按需傳遞惟一的參數')
 　　　　　 getters: {},// this.$store.getters.*** 至關於計算屬性，也至關於 filters(過濾器)
　　　　　　actions: {},// 處理異步
　　　　　　modules: {}
　　　　})　

　　　　　new Vue({

　　　　　　 el: '#app',

　　　　　　 router,

　　　　　　 render: h => h(App),

　　　　　　 store // 掛載

　　　　　})

store實例中的選項

　　state(狀態)，在這個選項中存儲咱們的數據，當Vue組件從store中讀取狀態的時候，若store中的狀態發生變化，那麼組件中的也會隨之改變，經過this.$store.state來訪問

注意：state中的狀態不能在組件中直接更改，要提交給mutations來改變，

　　在組件中 this.$store.commit('方法名',payload),第一個參數就是mutations中的處理方法，第二個參數是載荷，額外的參數，能夠是一個數值，也能夠是一個對象，大多數狀況下都是對象

　　mutations，更改store狀態的惟一方法就是提交(commit)mutations,裏面的方法都會接受state做爲第一個參數，第二個參數就是payload，接受commit提交來的額外參數，提交方法見上👆

注意：mutations中的函數必須是同步的

　　

　　getters，至關於計算屬性，內部的方法第一個參數是state，第二個參數是getters。getters中的方法返回值會根據它的依賴被緩存起來，當它的依賴值發生改變時會從新計算

在組件中經過this.$store.getters來訪問

 

　　actions，相似於mutations，不一樣點在於，actions是提交給mutations的，並且actions能夠包含任何異步操做，它內部的函數接受一個與 store 實例具備相同方法和屬性的 context 對象

但這個對象並非store實例自己，在組建中經過this.$store.dispatch('方法名')來觸發actions

 

　　modules，當咱們開發的應用愈來愈複雜時，store就會變得龐大、臃腫，代碼過多，很亂，這時，咱們就能夠將store分割成一個一個的模塊，每一個模塊都擁有本身的state、mutation、getter、action

例如：

const moduleA = {
  state: { ... },
  mutations: { ... },
  actions: { ... },
  getters: { ... }
}

const moduleB = {
  state: { ... },
  mutations: { ... },
  actions: { ... }
}

const store = new Vuex.Store({
  modules: {
    a: moduleA,
    b: moduleB
  }
})

store.state.a // -> moduleA 的狀態
store.state.b // -> moduleB 的狀態