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={};// 着键是这个 returnreturn 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.dispatchthis.setStyle({id:this.id,name: this.name,});}
}

Vuex 的异步数据更新（小记）相关推荐

echarts异步数据加载MySQL_微信小程序 Echarts 异步数据更新
微信小程序 Echarts 异步数据更新的练习,被坑了很多次,特作记录. 作者:罗兵地址:https://www.cnblogs.com/hhh5460/p/9989805.html 0.效果图 1 ...
xpage 传参_Vuex入门、同步异步存取值
目的: 1.了解vuex中的各个js文件的用途 2.利用vuex存值 3.利用vuex取值 4.Vuex的异步同步加载问题 1. vuex中各个组件之间传值 1.父子组件父组件-->子组件,通 ...
[Redux/Mobx] Redux和vuex有什么区别？
[Redux/Mobx] Redux和vuex有什么区别? 1:vuex的异步数据不需要使用到中件间,redux需要 2:vuex可以直接commit,action不是必须的,redux是必须的个人 ...
优雅地实现一个高效、异步数据实时刷新的列表
今日科技快讯 2月11日消息,据CNBC报道,当特斯拉公司于2019年1月宣布第二轮裁员以控制成本时,一个关键部门受到的打击尤为沉重.两名被裁汰的员工表示,负责向北美地区客户交付Model 3电动汽车 ...
如何快速掌握Vuex
目录一.Vuex简介 1.what: Vuex是一个专门为vue应用程序开发的一个状态管理模式,可以理解为一个"前端数据库"数据仓库. 2.why: 在使用Vuex进行组件传参之 ...
VUE项目--卖座app
一.由于做移动端,所以先根据设计稿设置好设置rem 二.做轮播图 2.使用swiper引入轮播图 1)现在flims文件下自定义film-swiper组件,来显示大轮播,注意加上key值,不然会加载过 ...
前端面试题（Vue）
一.vue 说说vue动态权限绑定渲染列表(权限列表渲染) 首先请求服务器,获取当前用户的权限数据,比如请求 this.$http.get("rights/list"); 获取到权 ...
BAT 前端开发面经 —— 吐血总结
更好阅读,请移步这里聊之前最近暑期实习招聘已经开始,个人目前参加了阿里的内推及腾讯和百度的实习生招聘,在此总结一下一是备忘.总结提升,二是希望给大家一些参考其他面试及基础相关可以参考其他博文: ...
前端面试题整理（vue/js/css）
什么是盒子模型把所有的网页元素都看成一个盒子,它具有content,padding,border,margin 四个属性,这就是盒子模型盒子模型有两种形式:标准盒子模型,怪异盒子模型标准模式,总 ...