那些前端開發(fā)需要掌握的：Vuex基礎(chǔ)使用方法

Vuex

概念

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

State

項目的數(shù)據(jù)源，整個項目的狀態(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里面的值映射為組件的計算屬性并展開，在組件的模板里面便可以直接使用： computed:{ ...mapState(['key']), } 復(fù)制代碼

Mutation

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

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

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

// 例：
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()把對應(yīng)的mutaions映射到組件的methods里面并展開，在組件的模板里面便可以直接使用： // 例 import { mapMutations } from 'vuex'; export default { name:"active", methods: { ...mapMutations(['add', 'reduce']) }, } 復(fù)制代碼

Action

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

第一個參數(shù)為與Store實例一樣具有相同方法的context對象，可以通過解構(gòu)的方式獲取對象上的方法；
第二個參數(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()把actions映射到組件的methods里面，然后在組件的模板里面直接調(diào)用 // 例： import { mapActions } from 'vuex'; export default { name:"active", methods: { ...mapActions(['toLog']) }, } 復(fù)制代碼

Getter

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

第一個參數(shù)為state用來提供數(shù)據(jù)；
第二個參數(shù)可以傳入其他的getters，使用其他getter加工后的數(shù)據(jù)；
可以在getter中返回一個函數(shù)，這樣我們在使用的時候就可以傳遞參數(shù)，根據(jù)參數(shù)來決定返回的數(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ù)制代碼