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

46次阅读

共计 1005 个字符,预计需要花费 3 分钟才能阅读完成。

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

正文完
 0