https://vuex.vuejs.org/zh/guide/

mutations的使用

mutations的使用比較特殊琼富，不能通過(guò)mutation直接調(diào)用，需要通過(guò)commit方法庇楞，并且mutations中是使用同步調(diào)用，舉例來(lái)說(shuō)，如果需要修改count的之可以直接通過(guò)this.$store.commit(this.$store.state.count ++'),
但是對(duì)于多個(gè)地方修改同一個(gè)值的時(shí)候，會(huì)讓人不知道為什么修改顷窒，這個(gè)是可以通過(guò)this.$store.commit('increment')修改，相當(dāng)于增加了給代碼增加了注解源哩。官方不推薦直接修改鞋吉，同構(gòu)increment相當(dāng)于動(dòng)態(tài)變化跟蹤，利于代碼的閱讀励烦，

const store  = new Vuex.Store({
  state :{
    count:0
  },
  mutations:{
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    }
  }
})

• 使用對(duì)象提交

add() {
                this.$store.commit('increment', {data:1})
            },

//store.js
increment(state,n){
            state.count +=n.data
        },

• 使用常量替換操作類(lèi)型(調(diào)用方法)

//store/index.js
    import {MUTATION_TYPE} from '../util/mutations-constant'
mutations: {
        [MUTATION_TYPE](state,n) {
            state.count += n.data
        },
       
    }

//Next.vue
    import {MUTATION_TYPE} from '../util/mutations-constant'
 add() {
                this.$store.commit(MUTATION_TYPE,{data:1})
            },

'mapState'使用

如果一個(gè)組件有多個(gè)狀態(tài)谓着，組件的狀態(tài)存放在store種，可以通過(guò)mapState來(lái)監(jiān)聽(tīng)變化（當(dāng)然可以通過(guò)計(jì)算屬性坛掠，但是官方說(shuō)的是計(jì)算屬性有些冗余）
官方例子

// store/index.js
const store  = new Vuex.Store({
  state :{
    count:0
  },
  mutations:{
    increment(state){
      state.count++
    },
    decrement(state){
      state.count--
    }
  }
})
export default  store



//next.vue
<template>
    <p>
        {{count}}
        {{countAlias}}
        {{countPlusLocalState}}
    </p>
</template>
export default {
        data() {
            return {
                localData: 10
            }
        },
        name: "Next",
        computed: mapState({
            count: state => state.count,  //1
            countAlias: 'count', //2
            countPlusLocalState(state) { //3
                return state.count + this.localData
            }
        }),
    }

1和2都是在組件種聲明一個(gè)屬性赊锚，對(duì)應(yīng)的是store種的state，3是定義的一個(gè)常規(guī)函數(shù),用來(lái)和本地?cái)?shù)據(jù)計(jì)算計(jì)算屉栓。

對(duì)象操作運(yùn)算符（我的理解是更加方便的寫(xiě)法舷蒲，更容易閱讀代碼）,可以讓它與局部計(jì)算屬性混合使用

  computed: {
          //本地的其他一些計(jì)算方法
            ...mapState({
                count: state => state.count
            })
        },

getters函數(shù)的使用：根據(jù)某些條件過(guò)濾掉數(shù)組，例如購(gòu)物車(chē)中有許多商品友多，最終結(jié)算的時(shí)候要剔除掉那些用戶(hù)沒(méi)有勾選的商品牲平，而getters的左右是在store中過(guò)濾掉，避免在多個(gè)頁(yè)面寫(xiě)重復(fù)邏輯域滥。

// /stoe/index.js
const store = new Vuex.Store({
    state: {
        todos: [
            {id: 1, text: '...', done: true},
            {id: 2, text: '...', done: false}
        ]
    },
    getters:{
        doneTools :state => {
            return state.todos.filter(todo => todo.done)
        }
    }
})

使用

// /Next.Vue
methods: {
            getTodos() {
                console.log(this.$store.getters.doneTools)
            }
        }

getter中的方法可以相互調(diào)用纵柿，類(lèi)似java中的重載(也不一定是重載蜈抓，就是a方法可以調(diào)用b方法)

  getters:{
        doneTools :state => {
            return state.todos.filter(todo => todo.done)
        }，
      tododoneTools(state,getter){
      return getter.doneTools  
    }
    }

getter方法的可以傳參昂儒，使用getters 根據(jù)id 查找數(shù)組中的元素

// /store/index.js
getters:{
      doneToolsId: state => (id) =>{
  return state.todos.find(todo => todo.id == id)    
}
}

mapGetters的使用是將store中的屬性映射到局部屬性中

// Next.vue

<template>
    <div>
        <button @click="getTodos">
            {{doneToolsCount}}
        </button>
    </div>
</template>

   import {mapState,mapGetters} from 'vuex'

  export default{
   name: "Next",
  computed:{
   ... mapGetters({
    'doneToolsCount'  //映射的 `/store/index.js`下的`getters`的`doneToolsCount`
})
}
}

action action其實(shí)調(diào)用的就是mutation,為什么不直接調(diào)用mutation,因?yàn)?code>mutation必須同步執(zhí)行沟使。而action 內(nèi)部可以執(zhí)行異步操作

• action通過(guò)參數(shù)解構(gòu)來(lái)調(diào)用mutation

//store/index.js
import {MUTATION_TYPE} from '../util/mutations-constant'
mutations: {

    [MUTATION_TYPE](state,n) {
        state.count += n.data
    },
    reduce: (state, n) => {
        state.count -= n
    }
}
,
actions:{
    add({commit},n){
        commit(MUTATION_TYPE,n)
    }
}

//Next.vue
add(){
this.$store.dispatch(add,{data:1})
},

// store/index.js
 },
    mutations: {
        [MUTATION_TYPE](state) {
            state.count += 10

        }

    },
    actions: {
        [MUTATION_TYPE](context) {
            context.commit(MUTATION_TYPE)
        }
    }

// Next.vue
  methods: {
            getTodos() {
                this.$store.dispatch(MUTATION_TYPE)
            }
        }

modules可以不同模塊定義不同的store，例如登陸渊跋，購(gòu)物車(chē)

// store/index.js

const moduleLogin = {
    state: {
       username:"aaa",
        psw:'1111'
    },
}
const muduelCar = {
    state: {
        count:0,
        sumprice:0
    },
}

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

export default store

//使用 Next.vue

        <button @click="getTodos">
           10

        </button>

  methods: {
            getTodos() {
      
                console.log(this.$store.state.a. username)
            }
        }