import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
const store = new Vuex.Store({
? ? ? state: { count: 0 },
? ? ? mutations: {
? ? ? ? ? ? increment (state) {
? ? ? ? ? ? ? ? state.count++
? ? ? ? ? ? }
? ? ? }
})
以上就是一個(gè)最簡(jiǎn)單的Vuex辅斟，每一個(gè)Vuex應(yīng)用就是一個(gè)store祝迂，在store中包含組件中的共享狀態(tài)state和改變狀態(tài)的方法（暫且稱(chēng)作方法）mutations遇革。
vuex的核心是：state,getter,actions,mutations
1荆隘、state
state就是根據(jù)你項(xiàng)目的需求精偿，自己定義的一個(gè)數(shù)據(jù)結(jié)構(gòu)蜒谤，里面可以放些通用的狀態(tài)。
const state = {
? openId:"",
? storeId:"",
? storeName:''
}
例如上面所寫(xiě)的俏让，這些狀態(tài)可以在各個(gè)頁(yè)面通過(guò)vuex訪問(wèn)楞遏。如下：
this.$store.state.openId = "111"
之前我一直通過(guò)上面的方式來(lái)修改state里面的狀態(tài)值，行首昔，肯定能用寡喝，但是好像官方并不建議我們這樣使用，而是建議使用mutations來(lái)改變state里面的值沙廉，因?yàn)椴煌ㄟ^(guò)mutations改變state，狀態(tài)不會(huì)被同步臼节。至于mutations下面會(huì)講到撬陵。
2、getter
getter怎么理解呢网缝？通俗的理解可以認(rèn)為是getter里的函數(shù)就是vuex里的計(jì)算屬性巨税，類(lèi)似于computed函數(shù)。
const store = new Vuex.Store({
? ? ? state: {
? ? ? ? ? ? count: 0
? ? ? },
? ? ? getters: {? // getters
? ? ? ? ? ? countAdd: function (state) {
? ? ? ? ? ? ? ? return state.count++
? ? ? ? ? ? }
? ? ? },
? ? ? mutations: {
? ? ? ? ? ? increment (state) {
? ? ? ? ? ? ? ? state.count++
? ? ? ? ? ? }
? ? ? }
})
getter函數(shù)怎么用呢粉臊？如上vuex里定義了一個(gè)getter函數(shù)countAdd草添。我們可以在vue文件里的computed計(jì)算屬性里引用，如下扼仲。
computed: {
? ? ...mapGetters{["countAdd"]}
? ? show：function(){
? ? ? ? ? alert("這個(gè)是測(cè)試頁(yè)面")
? ? }
}
這樣我們可以直接在vue頁(yè)面里取到countAdd的值{{countAdd}}即為1远寸。可惜在我的項(xiàng)目里目前還沒(méi)用到getter屠凶，可能寫(xiě)的少了驰后，還沒(méi)理解其中的要義。
3矗愧、mutations
官方定義：更改 Vuex 的 store 中的狀態(tài)的唯一方法是提交 mutation灶芝。Vuex 中的 mutations 非常類(lèi)似于事件：每個(gè) mutation 都有一個(gè)字符串的 事件類(lèi)型 (type) 和 一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)：
const store = new Vuex.Store({
? state: {
? ? count: 1
? },
? mutations: {
? ? increment (state) {
? ? ? // 變更狀態(tài)
? ? ? state.count++
? ? }
? }
})
你不能直接調(diào)用一個(gè) mutation handler夜涕。這個(gè)選項(xiàng)更像是事件注冊(cè)：“當(dāng)觸發(fā)一個(gè)類(lèi)型為 increment 的 mutation 時(shí)犯犁，調(diào)用此函數(shù)∨鳎”要喚醒一個(gè) mutation handler酸役，你需要以相應(yīng)的 type 調(diào)用 store.commit 方法：
store.commit('increment')
也可以向store.commit傳入第二參數(shù)，也就是mutation的payload:
mutaion: {
? ? increment (state, n) {
? ? ? ? state.count += n;
? ? }
}
store.commit('increment', 10);
但是有時(shí)候晓避，單個(gè)傳入n可能并不能滿足我們的業(yè)務(wù)需要簇捍，這時(shí)候我們可以選擇傳入一個(gè)payload對(duì)象：
mutation: {
? ? increment (state, payload) {
? ? ? ? ? ? state.totalPrice += payload.price + payload.count;
? ? }
}
store.commit({
? ? type: 'increment',
? ? price: 10,
? ? count: 8
})
不例外，mutations也有映射函數(shù)mapMutations俏拱，幫助我們簡(jiǎn)化代碼暑塑，使用mapMutations輔助函數(shù)將組件中的methods映射為store.commit調(diào)用。
import { mapMutations } from 'vuex'
export default {
? methods: {
? ? ...mapMutations({
? ? ? ? add: 'increment' // 映射 this.add() 為 this.$store.commit('increment')
? ? })
? }
}
這樣我們可以在vue文件里直接調(diào)用函數(shù)：this.add()而不用this.$store.commit('increment')這樣寫(xiě)了锅必，簡(jiǎn)化了很多事格。
需要注意：Mutations必須是同步函數(shù)。
如果我們需要異步操作搞隐，Mutations就不能滿足我們需求了驹愚，這時(shí)候我們就需要Actions了。
4劣纲、action
Action 類(lèi)似于 mutation逢捺，不同在于：
Action 提交的是 mutation，而不是直接變更狀態(tài)癞季。
Action 可以包含任意異步操作劫瞳。
官方demo如下：
const store = new Vuex.Store({
? state: {
? ? count: 0
? },
? mutations: {
? ? increment (state) {
? ? ? state.count++
? ? }
? },
? actions: {
? ? increment (context) {
? ? ? context.commit('increment')
? ? }
? }
})
如果我在vue頁(yè)面里想用action，我們可以分發(fā) Action绷柒，Action 通過(guò) store.dispatch 方法觸發(fā)：
store.dispatch('increment')
Actions 支持同樣的載荷方式和對(duì)象方式進(jìn)行分發(fā)：
// 以載荷形式分發(fā)
store.dispatch('incrementAsync', {
? amount: 10
})
// 以對(duì)象形式分發(fā)
store.dispatch({
? type: 'incrementAsync',
? amount: 10
})
我們也可以運(yùn)用其映射函數(shù)：mapActions
methods:{
? ? ...mapActions{[
? ? ? ? ? "add":"increment "http://函數(shù)命名不相同
? ? ? //? "increment ":"increment "http://函數(shù)命名相同
? ? ]}
}
調(diào)用：this.add()即可志于。相同時(shí)候調(diào)用：this.increment()
Modules
由于使用單一狀態(tài)樹(shù)，應(yīng)用的所有狀態(tài)會(huì)集中到一個(gè)比較大的對(duì)象废睦。當(dāng)應(yīng)用變得非常復(fù)雜時(shí)伺绽，store 對(duì)象就有可能變得相當(dāng)臃腫。
為了解決以上問(wèn)題嗜湃，Vuex 允許我們將 store 分割成模塊（module）奈应。每個(gè)模塊擁有自己的 state、mutation购披、action钥组、getter、甚至是嵌套子模塊——從上至下進(jìn)行同樣方式的分割：
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 的狀態(tài)
store.state.b // -> moduleB 的狀態(tài)
總結(jié)起來(lái)：mutation 只管存今瀑，你給我（dispatch）我就存程梦；action只管中間處理点把，處理完我就給你，你怎么存我不管（所有的改變state狀態(tài)的都是mutation 來(lái)操作）屿附；Getter 我只管取郎逃，我不改的（類(lèi)似計(jì)算屬性）。
