本文github地址
首先我問看下完整的Vuex選項(xiàng)對象
new Vuex.Store({
state, //訪問狀態(tài)對象
mutations, //訪問觸發(fā)狀態(tài)
getters,
actions
});
//還有一個(gè)模塊的
export default new Vuex.Store({
modules:{
a:moduleA
}
});
一、 state --- 訪問狀態(tài)對象
說明：也就是使用vuex中的數(shù)據(jù)
**1. **直接在組件中使用{{ $store.state.num }}
**2. **需要使用數(shù)據(jù)的組組件（此處是App.vue）中的計(jì)算屬性
a. 方式一
computed: {
count(){
return this.$store.state.num + '：方式一獲取的state數(shù)據(jù)';//this指的是main.js中的vue實(shí)例對象
}
}
b. 方式二冕碟，利用mapState
import {mapState} from 'vuex'
computed:mapState({
// es箭頭函數(shù)寫法迫悠，好處箭頭函數(shù)中的this有穿透效果庵芭，直接是上上級
// count: state => state.num + '：方式二獲取的state數(shù)據(jù)'
// es5寫法
count:function (state) {
return state.num + '：方式二獲取的state數(shù)據(jù)'
}
})
c. 方式三,不對數(shù)據(jù)進(jìn)行計(jì)算（加工處理）全蝶，當(dāng)數(shù)據(jù)較多的時(shí)候,數(shù)組形式
computed:mapState([
'counut'//這里必須state中的數(shù)據(jù)和此模板中的數(shù)據(jù)一個(gè)名字，也就類似組件定義的簡寫
])
d. 方式四,不對數(shù)據(jù)進(jìn)行計(jì)算 芽卿，當(dāng)數(shù)據(jù)較多的時(shí)候,json形式
推薦
computed:mapState({
count:'num'
})
效果如下圖：
二揭芍、 Mutations--- 觸發(fā)狀態(tài)
說明：必須用commit觸發(fā)mutations中的方法
需求：在組件中傳入一個(gè)值給store.js
<button type="button" name="buttonAdd" @click="$store.commit('add',{a:10})">加一個(gè)</button>
const mutations = {
//定義方法 --- 類似methods
add(state,n){//state 是把上面的數(shù)據(jù)引入進(jìn)來的
console.log(n);//傳入的第二參數(shù)的那個(gè)對象
state.num+= n.a;
}
}
1. 利用mapMutations引入sotre中的觸發(fā)狀態(tài)
<button type="button" name="buttonAdd" @click="add({a:10})">map=>加一個(gè)</button><!-- 傳值的話只需要在括號(hào)里傳，但要注意格式 -->
<button type="button" name="buttonAdd" @click="minus">map=>減一個(gè)</button>
import {mapMutations} from 'vuex'
//因?yàn)榉椒ㄋ詫懺诮M件中的methods中
methods:mapMutations([
'add',
'minus'
])
三卸例、 getters --- 獲取者
注意：在vue2.x中的computed中不要使用箭頭函數(shù)称杨，因?yàn)榧^函數(shù)中的this指的是上一層不是本層肌毅。
//組件中
import {mapGetters} from 'vuex'
computed:{
/*count(){
return this.$store.getters.num
}*/
//map對象方式獲取getters
...mapGetters({
count:'num'//引進(jìn)是靜態(tài)的
})
},
//store.js文件中
const getters = {
num:function (state) {
return state.num;
}
}
export default new Vuex.Store({
state,
mutations,
getters
});
注意：..mapGetters({})使用了三個(gè)點(diǎn)“...”，由于vue-cli生成的依賴包中不能解析此語法姑原，所以需要進(jìn)行如下配置悬而。
- npm install babel-preset-stage-2 --save-dev
- 在.babelrc文件中加一個(gè)配置
["stage-2"]
四、 actions --- 異步狀態(tài)
和Mutations的區(qū)別是Mutations是同步狀態(tài)页衙，Actions是異步狀態(tài)摊滔，可以調(diào)用Mutations中的狀態(tài)，異步的批處理的一個(gè)集合店乐。
//組件中
<button type="button" name="buttonAdd" @click="addPlus">addPlus =>加二個(gè)</button>
<button type="button" name="buttonAdd" @click="minusPlus">minusPlus</button>
import {mapActions} from 'vuex'
methods:{
...mapMutations([
'add',
'minus'
]),
...mapActions([
'addPlus',
]),
...mapActions({
minusPlus:'minusPlus'
})
}
//store.js中
const actions = {
addPlus(context){//context代表了整個(gè)的store
context.commit('add',{a:2}); //每次加2
setTimeout(()=>{
context.commit('minus');
},3000)
console.log('Actions中的加');
},
minusPlus({commit}){//commit
commit('minus')
}
}
export default new Vuex.Store({
state,
mutations,
getters,
actions
});
五艰躺、 module --- 模塊化
當(dāng) state, mutations, getters,actions太多的時(shí)候，我們就需要分成不同組別的模塊組眨八。
//組件中
A模塊組中的num => {{ $store.state.a.numA }}
B模塊組中的num => {{ $store.state.b.numB }}
//store.js中
const moduleA ={
state: {
numA: 888
}
}
const moduleB ={
state: {
numB: 666
}
}
export default new Vuex.Store({
modules:{
a:moduleA,
b:moduleB
}
});
最終demo如下圖：
