store.js store數(shù)據(jù)改變的唯一方法就是mutation
mutation-types.js定義一些方法
mutation.js 把處理數(shù)據(jù)邏輯方法全部放在mutations里面，使得數(shù)據(jù)和視圖分離
action.js action 提交的是 mutation，而不是直接變更狀態(tài)
state
State負責(zé)存儲整個應(yīng)用的狀態(tài)數(shù)據(jù)偷遗，一般需要在使用的時候在跟節(jié)點注入store對象方椎，后期就可以使用this.$store.state直接獲取狀態(tài)
//store為實例化生成的(main.js)
import store from './store'
new Vue({
el: '#app',
router,
store,
components: { App },
template: '<App/>'
})
這個store可以理解為一個容器，包含著應(yīng)用中的state等阅酪。實例化生成store的過程是：
const mutations = {...};
const actions = {...};
const state = {...};
Vuex.Store({
state,
actions,
mutation
});
后續(xù)在組件中使用的過程中，如果想要獲取對應(yīng)的狀態(tài)你就可以直接使用this.$store.state獲取，當(dāng)然扛点，也可以利用vuex提供的mapState輔助函數(shù)將state映射到計算屬性中去，如
//我是組件
import {mapState} from 'vuex'
export default {
computed: mapState({
count: state => state.count
})
}
Mutations
Mutations的中文意思是“變化”岂丘，利用它可以更改狀態(tài)陵究，本質(zhì)就是用來處理數(shù)據(jù)的函數(shù)，其接收唯一參數(shù)值state奥帘。store.commit(mutationName)是用來觸發(fā)一個mutation的方法铜邮。需要記住的是，定義的mutation必須是同步函數(shù)寨蹋，否則devtool中的數(shù)據(jù)將可能出現(xiàn)問題松蒜，使?fàn)顟B(tài)改變變得難以跟蹤。
const mutations = {
mutationName(state已旧，n) {
//在這里改變state中的數(shù)據(jù)
state.count +=n;
}
}
在組件中觸發(fā)：
//我是一個組件
export default {
methods: {
handleClick() {
this.$store.commit('mutationName')
}
}
}
或者使用輔助函數(shù)mapMutations直接將觸發(fā)函數(shù)映射到methods上秸苗，這樣就能在元素事件綁定上直接使用了。如：
import {mapMutations} from 'vuex'
//我是一個組件
export default {
methods: mapMutations([
'mutationName'
])
}
//es6擴展運算符
...mapMutations(['mutationName'])
Actions
Actions也可以用于改變狀態(tài)运褪，不過是通過觸發(fā)mutation實現(xiàn)的惊楼，重要的是可以包含異步操作。其輔助函數(shù)是mapActions與mapMutations類似秸讹，也是綁定在組件的methods上的檀咙。如果選擇直接觸發(fā)的話，使用this.$store.dispatch(actionName)方法嗦枢。
//定義Actions
const actions = {
actionName({ commit }) {
//dosomething
commit('mutationName')
}
}
在組件中使用
import {mapActions} from 'vuex'
//我是一個組件
export default {
methods: mapActions([
'actionName',
])
}
Getters
有些狀態(tài)需要做二次處理攀芯，就可以使用getters。通過this.$store.getters.valueName對派生出來的狀態(tài)進行訪問文虏÷屡担或者直接使用輔助函數(shù)mapGetters將其映射到本地計算屬性中去殖演。
const getters = {
strLength: state => state.aString.length
}
//上面的代碼根據(jù)aString狀態(tài)派生出了一個strLength狀態(tài)
在組件中使用
import {mapGetters} from 'vuex'
//我是一個組件
export default {
computed: mapGetters([
'strLength'
])
}
Plugins
插件就是一個鉤子函數(shù)景殷，在初始化store的時候引入即可鲁纠。比較常用的是內(nèi)置的logger插件，用于作為調(diào)試使用俯在。
import createLogger from 'vuex/dist/logger'
const store = Vuex.Store({
...
plugins: [createLogger()]
})
總結(jié)
mapState 訪問state對象
mapMutations 修改狀態(tài)(同步)
mapGetters 計算過濾操作
mapActions 修改狀態(tài)(異步)
