Vuex 的异步数据更新(小记)

字节拓星人
• 阅读 3460

更改 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,
     });
    }
}
点赞
收藏
评论区
推荐文章
Chase620 Chase620
4年前
Vue方向:Vuex状态管理: 辅助函数mapState与mapGetters
1、mapState和mapGetters的作用   mapState用于将state中的数据映射到组件的计算属性中,而mapGetters用于将getter中的计算属性映射到组件的计算属性中,之前获取Vuex数据都是通过$store找到state对象,再去state中去拿数据,操作getter,muta
Dax Dax
4年前
veux的使用
1)说说什么是vuex(下定义)2)vuex解决了哪些问题,为什么要用(必要性)3)怎么使用vuex(使用方法)4)描述vuex原理,提升答案深度(深层原理升华答案)vuex的流程图分析:我们可以看到图中虚线框包裹起来的部分就是vuex的三个组成部分(Action,Mutations,state),我们来简单的捋一下整个流程:首先vue的组件在响应用户行为交
Easter79 Easter79
3年前
thinkcmf+jsapi 实现微信支付
首先从小程序端接收订单号、金额等参数,然后后台进行统一下单,把微信支付的订单号返回,在把订单号发送给前台,前台拉起支付,返回参数后更改支付状态。。。回调publicfunctionnotify(){$wechatDb::name('wechat')where('status',1)find();
Souleigh ✨ Souleigh ✨
4年前
Vuex 4 正式发布:打包现在与 Vue 3 一致
Vuex是一个专门为Vue.js应用程序开发的状态管理模式。Vuex采用集中式存储管理应用的所有组件组件的状态。换句话说,Vuex就是帮开发者存储多个组件共享的数据,方便开发者对其读取的更改的工具。Vuex4正式版本现已发布。Vuex4的改进重点是兼容性。Vuex4支持Vue3,并提供了与Vuex3完全相同的
Chase620 Chase620
4年前
Promise从入门到拿Offer之手写Promise
1、Promise构造函数的实现Promise构造函数用来声明示例对象,需要传入一个执行器函数。其中包括resolve函数和reject函数,以及几个重要的属性:状态属性、结果属性和回调函数队列。构造函数的基本框架resolve函数用于异步处理成功后调用的函数。其中包括验证对象状态修改次数,修改promise实例对象状态,异步调用成功的回调函数
九路 九路
4年前
通过一个简单实例了解vuex
简单说明什么是vuex,vuex怎么使用,什么场景下适合使用vuex,vuex文档(https://links.jianshu.com/go?tohttps%3A%2F%2Fvuex.vuejs.org%2Fzh%2F)中都有介绍。看完文档之后,都知道vuex的核心有State、Getter、Mutation、Action、Modul
可莉 可莉
4年前
了解Vuex状态管理模式
1Vuex是什么呢?它是Vue的状态管理模式,在使用vue的时候,需要在vue中各个组件之间传递值是很痛苦的,在vue中我们可以使用vuex来保存我们需要管理的状态值,值一旦被改变,所有引用该值的地方就会自动更新。是不是很方便,很好用呢?vuex是专门为vue.js设计的状态管理模式,集中式存储和管理应用程序中所有组件的状态,vuex也集成了vue的
Chase620 Chase620
4年前
Vue方向:Vuex状态管理:Action异步函数
1、Action的使用        Action类似于mutation,不同之处在于Action提交的是mutation,而不是直接更改状态,Action可以包含任何的异步操作。2、定义以及使用Action代码3、分发Action代码代码action4、Action函数参数
Stella981 Stella981
3年前
Event事件
07.07自我总结Event事件一.导入模块fromthreadingimportEvent二.概念线程间状态同步:即将一个任务丢到子进程中,这个任务将异步执行,如何获取到这个任务的执行状态注意:执行状态和执行结果不是同一个概念,异步回调拿到的是任务
Stella981 Stella981
3年前
JavaScript回调函数的高手指南
摘要:本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。回调函数是每个前端程序员都应该知道的概念之一。回调可用于数组、计时器函数、promise、事件处理中。本文将会解释回调函数的概念,同时帮你区分两种回调:同步和异步。1.回调函数首先写一个向人打招呼的函数。只需要创建一个接受name参数的函数gree
美凌格栋栋酱 美凌格栋栋酱
4个月前
Oracle 分组与拼接字符串同时使用
SELECTT.,ROWNUMIDFROM(SELECTT.EMPLID,T.NAME,T.BU,T.REALDEPART,T.FORMATDATE,SUM(T.S0)S0,MAX(UPDATETIME)CREATETIME,LISTAGG(TOCHAR(
字节拓星人
字节拓星人
Lv1
梦里分明见关塞,不知何路向金微。
文章
5
粉丝
0
获赞
0