Vuex 的异步数据更新

更改 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,
     });
    }
}

本文内容仅供个人学习、研究或参考使用，不构成任何形式的决策建议、专业指导或法律依据。未经授权，禁止任何单位或个人以商业售卖、虚假宣传、侵权传播等非学习研究目的使用本文内容。如需分享或转载，请保留原文来源信息，不得篡改、删减内容或侵犯相关权益。感谢您的理解与支持！

链接: https://shenqiku.cn/article/FLY_2243