Vuex

概念

為Vue.js程序開(kāi)發(fā)的一套狀態(tài)管理器

State

項(xiàng)目的數(shù)據(jù)源，整個(gè)項(xiàng)目的狀態(tài)都保存在state里面。

 state:{
     number:123,
     name:'bulang',
     sex:'boy',
     infos:[{
         name:'kaisa',
         sex:'boy'
      },{
         name:'jiecaowa',
         sex:'girl'
     }]
 },
復(fù)制代碼

組件中獲取state的方法：

• this.$store.state.key
• 使用輔助函數(shù)mapState()把state里面的值映射為組件的計(jì)算屬性并展開(kāi)，在組件的模板里面便可以直接使用： computed:{ ...mapState(['key']), } 復(fù)制代碼

Mutation

提交mutation是唯一可以改變state的方法；

第一個(gè)參數(shù)為state，第二個(gè)參數(shù)為自定的參數(shù)payload；

使用同步方式操作state，否則由于異步數(shù)據(jù)無(wú)法追蹤導(dǎo)致devtools記錄的歷史快照會(huì)出問(wèn)題；

// 例：
mutations:{
    add:(state, payload)=>{
        state.number+=payload.gap;
    },
    reduce:(state, payload)=>{
        state.number-=payload.gap;
    }
}
復(fù)制代碼

組件中提交mutation的方法：

• this.$store.commit('add',{gap:5})
• 使用輔助函數(shù)mapMutations()把對(duì)應(yīng)的mutaions映射到組件的methods里面并展開(kāi)，在組件的模板里面便可以直接使用： // 例 import { mapMutations } from 'vuex'; export default { name:"active", methods: { ...mapMutations(['add', 'reduce']) }, } 復(fù)制代碼

Action

主要作用：執(zhí)行異步操作（如：接口請(qǐng)求等）并提交mutaion;

• 第一個(gè)參數(shù)為與Store實(shí)例一樣具有相同方法的context對(duì)象，可以通過(guò)解構(gòu)的方式獲取對(duì)象上的方法；
• 第二個(gè)參數(shù)為自定義傳的值；
• actions之間可以互相派發(fā)；

// 例：
actions:{
    toLog:({dispatch}, msg)=>{
        dispatch('promiseLog',msg).then(()=>{
            console.log('success');
        }).catch(()=>{
            console.log('error');
        })
    },
    promiseLog:({commit},msg)=>{
        return new Promise((resolve, reject)=>{
            const i = ~~(Math.random()*10);
            console.log(i)
            if(i<5){
                commit('log',msg)
                resolve();
            }else{
                reject();
            }
        });
    }
},
復(fù)制代碼

在組件中派發(fā)actions的方法:

• this.$store.dispatch('toLog','yes')
• 使用輔助函數(shù)mapActions()把a(bǔ)ctions映射到組件的methods里面，然后在組件的模板里面直接調(diào)用 // 例： import { mapActions } from 'vuex'; export default { name:"active", methods: { ...mapActions(['toLog']) }, } 復(fù)制代碼

Getter

主要作用：對(duì)state數(shù)據(jù)進(jìn)行加工，用來(lái)派生新的狀態(tài)

• 第一個(gè)參數(shù)為state用來(lái)提供數(shù)據(jù)；
• 第二個(gè)參數(shù)可以傳入其他的getters，使用其他getter加工后的數(shù)據(jù)；
• 可以在getter中返回一個(gè)函數(shù)，這樣我們?cè)谑褂玫臅r(shí)候就可以傳遞參數(shù)，根據(jù)參數(shù)來(lái)決定返回的數(shù)據(jù)；

// 例：
getters:{
    getInfo:state=>{
        return `my name is ${state.name}, ${state.sex}`;
    },
    getCustomInfo:state => index => {
        return `my name is ${state.infos[index]['name']}, ${state.infos[index]['sex']}`;
    }
}
復(fù)制代碼

在組件中使用getters

• this.$store.getters.getInfo
• 使用輔助函數(shù)mapGetters把getter映射到組件的computed里面，然后在組件模板中直接使用； // 例： import { mapGetters } from 'vuex' export default { name:'show', computed:{ ...mapGetters(['getInfo', 'getCustomInfo']) } } 復(fù)制代碼

Module

當(dāng)項(xiàng)目足夠大的時(shí)候，所有的state，mutaions，actions，getters放到一個(gè)文件里面會(huì)非常難維護(hù)，所以我們需要把state，mutaions，actions，getters分別提出來(lái)放到各自的文件并導(dǎo)出。

1. 每個(gè)模塊里面有各自的state，mutaions，actions，getters文件;
2. 每個(gè)模塊有一個(gè)index.js文件統(tǒng)一導(dǎo)出所有方法;
3. 導(dǎo)出模塊時(shí)可以指定是否使用命名空間，這樣可以在組件中指定對(duì)應(yīng)的模塊來(lái)執(zhí)行對(duì)應(yīng)的操作;
4. 在store的入口文件導(dǎo)入所有模塊兒;
5. 實(shí)例化Store時(shí)在modules里面?zhèn)魅肽K;
6. 使用輔助函數(shù)時(shí)，如果聲明了使用命名空間，可以給輔助函數(shù)的第一個(gè)參數(shù)傳入指定模塊;