1、vuex的簡單使用方法

　　安裝： cnpm install vuex --save

　　使用：

　　　　（1）新建一個store的文件夾

　　　　　　代碼例子：

import Vue from ‘vue‘
import Vuex from ‘vuex‘

Vue.use(Vuex)

const state = {
    count: 0
}

const mutations = {
    increment(state) {
        state.count ++;
    }
}

export default new Vuex.Store({
  state,
  mutations
})
 

　　　　（2）在main.js裏面引用　　　　　　

new Vue({
  el: ‘#app‘,
  store,
  router,
  template: ‘<App/>‘,
  components: { App }
})

　　　　（3）在組件裏面裏面使用　　　

export default {
    computed: {
        count() {
            return this.$store.state.count
        }
    }
}

2、state

　　（1）mapState函數

　　　　當一個組件需要獲取多個狀態時候，將這些狀態都聲明為計算屬性會有些重復和冗余。為了解決這個問題，我們可以使用 mapState

　　PS： 當computed裏面還要同時放置其他的計算屬性的時候，可以把state的通過對象展開運算符

computed: {
      ...mapState({=
        count: state => state.count,
        countAlias: ‘count‘,
        countPlusLocalState (state) {
          return state.count + this.localCount
        }
      })
          
    }
 

2、getter

　　getter的返回值會根據它的以來被緩存起來，且當只有它的依賴值發生改變才會被重新計算　

　　（1）接受state作為第一個參數

const getters = {
    evenCount: state => {
        return state.count + 2;
    }
}

export default new Vuex.Store({
  getters
})

　　（2）接受其他的getter作為第二個參數　

doneTodos: state => {
    return state.todos.filter(todo => todo.done)
},
doneTodosCount: (state, getters) => {
    return getters.doneTodos.length
}

　　（3）也可以通過返回一個函數，實現給 getter 傳參

getTodosById: state => (id) => {
    return state.todos.find(todo => (todo.id) === id)
}

　　（4）mapGetters輔助函數　　

...mapGetters({
     evenCount:‘evenCount‘,
     doneTodos: ‘doneTodos‘,
     doneTodosCount: ‘doneTodosCount‘,
})

3、mutation： 同步函數

　　更改vuex的store中的狀態的唯一發哪地方是提交mutation，在vuex中的mutation非常類似與事件：每個mutation都有一個字符串的事件類型（type）和一個回調函數（handler）。這個回調函數就是我們實際進行狀態更改的地方，並且他會接受一個state作為第一個參數：　　

const mutations = {
    increment(state) {
        state.count ++
    }
}

　　（1）mapMutations　　

methods: {
    ...mapMutations({
        add: ‘increment‘
    })
}

　　（2）可以向mutation傳入額外的參數，即mutation的載荷　　

customIncrement(state, payload) {
    state.count += payload.n
}

　　使用： 　　

customAdd() {
    return this.$store.commit("customIncrement", {
        ‘n‘: 3
    })
}

4、action　： 可以異步執行

　　Action 類似於 mutation，不同在於：

• Action 提交的是 mutation，而不是直接變更狀態。
• Action 可以包含任意異步操作。

　　使用：　

export default {
    addevent: ({commit}, param) => commit(‘ADDEVENT‘, param),
    reduce: ({commit}, param) => commit(‘DISCREMENT‘, param),
}

　　調用： 　　

...mapActions({
    add1: ‘addevent‘
}),
reduce() {
    this.$store.dispatch("reduce").then(() => {
        console.info(23342)
    })
}

　　PS： 異步執行可以利用.then 、 async/await

5、module

　　由於使用單一狀態數的話，應用的所有會集中到一個比較大的對象，當應用變得非常復雜的時候，store對象就有可能變得相當的臃腫，因此可以將store分割模塊，每個模塊擁有自己的state、mutation、action、getter

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 的狀態

vuex 學習筆記