那些前端開發需要掌握的：Vuex基礎使用方法

Vuex

概念

為Vue.js程序開發的一套狀態管理器

State

項目的數據源，整個項目的狀態都保存在state里面。

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

組件中獲取state的方法：

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

Mutation

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

第一個參數為state，第二個參數為自定的參數payload；

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

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

組件中提交mutation的方法：

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

Action

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

第一個參數為與Store實例一樣具有相同方法的context對象，可以通過解構的方式獲取對象上的方法；
第二個參數為自定義傳的值；
actions之間可以互相派發；

// 例：
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();
            }
        });
    }
},
復制代碼

在組件中派發actions的方法:

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

Getter

主要作用：對state數據進行加工，用來派生新的狀態

第一個參數為state用來提供數據；
第二個參數可以傳入其他的getters，使用其他getter加工后的數據；
可以在getter中返回一個函數，這樣我們在使用的時候就可以傳遞參數，根據參數來決定返回的數據；

// 例：
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']}`;
    }
}
復制代碼

在組件中使用getters

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