Vuex 的非同步資料更新（小記）

cason6810發表於2019-03-06
Vue非同步

更改 Vuex 的 store 中的狀態的唯一方法是提交 mutation。Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。這個回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數
mutation 是同步執行，不是非同步執行。

由於Mutations不接受非同步函式，要透過Actions來實現非同步請求。

export const setAddPurchaseStyle = ({commit, state}, obj) => {
    url='http://xxx.com' + '/json/' + '/development' + '/purchaserexp/create_company.js';
    let _tempObj={};

    // 著鍵是這個 return
    return new Promise(function(resolve, reject) {
        axios.get(url, {}).then((response) => {
            resolve('請求成功後，傳遞到 then');
        }, (response) => {
            //失敗
            console.info('error', response);
            reject('請求失敗後，傳遞到 catch')
        });
    }).then((res)=>{
        // res 是 （請求成功後，傳遞到 then）
        commit('putSSS', Math.random()); // 在Promise的成功中，呼叫 mutations 的方法
    })
};

在Mutations中透過putSSS接收並更新style資料：

export const putSSS=(state, val) => {
    state.style = val;
};

元件建立時更新資料，寫在 created 中

this.$store.dispatch('setStyle',{
    id:this.id,
    name: this.name,
    });

使用 mapActions

使用 mapActions 輔助函式將元件的 methods 對映為 store.dispatch 呼叫（需要先在根節點注入 store）

methods: {
    ...mapActions([
        'setStyle'
    ]),
    test(){
    // 對映後可直接使用方法，不需要寫 this.$store.dispatch
     this.setStyle({
         id:this.id,
        name: this.name,
     });
    }
}

相關文章