今天就跟大家聊聊有关如何在Vuex中使用actions属性，可能很多人都不太了解，为了让大家更加了解，小编给大家总结了以下内容，希望大家根据这篇文章可以有所收获。
1 Promise 方式
main.js：
计算
安全
数据库
网络和加速
企业服务
const store = new Vuex.Store({
state: {
count: 0,
},
mutations: {
increment(state, n = 1) {
state.count += n;
}
},
actions: {
asyncInrement(context) {
return new Promise(resolve => {
setTimeout(() => {
context.commit('increment');
resolve();
}, 1000)
});
}
}
});这里使用了 Promise ，在 1 s 后提交了 mutations 中定义的 increment 递增函数。它是 ES6 语法，有三种状态：
| 状态 | 说明 |
|---|---|
| Pending | 进行中 |
| Resolved | 已完成 |
| Rejected | 失败 |
index.vue：
<template>
<div>
{{count}}
<button @click="asyncIncrementByAction">+1</button>
</div>
</template>
<script>
export default {
name: "index.vue",
computed: {
count() {
return this.$store.state.count;
}
},
methods: {
asyncIncrementByAction() {
this.$store.dispatch('asyncInrement').then(() => {
console.log(this.$store.state.count);
})
}
}
}
</script>2 Callback 方式
也可以使用普通回调来实现异步方案。
main.js
const store = new Vuex.Store({
...
actions: {
...
asyncInrement2(context, callback) {
setTimeout(() => {
context.commit('increment');
callback();
}, 1000);
}
}
});index.vue：
<template>
<div>
...
{{count}}
<button @click="asyncIncrementByAction2">+1(Callback)</button>
</div>
</template>
<script>
export default {
...
methods: {
...
asyncIncrementByAction2() {
this.$store.dispatch('asyncInrement2',() => {
console.log(this.$store.state.count);
});
}
}
}
</script>3 效果
vuex action和mutations的区别
action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：
1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作
2、action改变状态，最后是通过提交mutation
使用方式:
安装:
npm install vuex --save引用:
store.js
方法一:
/**
* 创建完文件后需要去到main.js中引入成全局
*/
import Vue from "vue";
import Vuex from "vuex";
//使用vuex
Vue.use(Vuex);
const state = {
targetUser: {} //用户详细资料数据
};
const getters = {
//获取到用户状态,//实时监听state值的变化(最新状态)
targetUser: state => state.targetUser
};
const mutations = {
//自定义改变state初始值的方法
SET_TARGET_USER(state, targetUser) {
if (targetUser) {
state.targetUser = targetUser; //如果targetUser有内容就赋给状态信息
} else {
//如果没内容就给targetUser赋空对象
state.targetUser = {};
}
}
};
const actions = {
//这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
// 页面定义的setGargetUser,targetUser为页面传过来的值
setGargetUser({ commit }, targetUser) {
commit("SET_TARGET_USER", targetUser);
}
};存储页面:
this.$store.dispatch('setGargetUser',friend)获取页面:
computed:{
// 提示vuex中存入的用户详细资料
targetUser(){
return this.$store.getters.targetUser
}
},以上方法有一个问题就是如果多人开发;会出现不利于管理,下面用一个方法定义一个常量
存储:
this.$store.dispatch('setUser',decode)store.js
/**
* 创建完文件后需要去到main.js中引入成全局
*/
import Vue from "vue";
import Vuex from "vuex";
// 持久存储插件
import createPersistedState from "vuex-persistedstate";
//使用vuex
Vue.use(Vuex);
/**
* 在需要多人协作的项目中，我们可以使用常量代替mutation 事件类型。这在各种 Flux 实现中是很常见的模式。同时把这些常量放在单独的文件中可以让协作开发变得清晰。
* 定义存储信息
*
* */
const types = {
SET_TARGET_USER: "SET_TARGET_USER" //详细资料
};
const state = {
//用户初始化的状态
targetUser: {} //用户详细资料数据
};
const getters = {
//获取到用户状态,//实时监听state值的变化(最新状态)
targetUser: state => state.targetUser
};
const mutations = {
//自定义改变state初始值的方法
[types.SET_TARGET_USER](state, targetUser) {
if (targetUser) {
state.targetUser = targetUser; //如果targetUser有内容就赋给状态信息
} else {
//如果没内容就给targetUser赋空对象
state.targetUser = {};
}
}
};
const actions = {
//这里面的方法是用来异步触发mutations里面的方法,context与store 实例具有相同方法和属性
setGargetUser({ commit }, targetUser) {
commit(types.SET_TARGET_USER, targetUser);
// localStorage.setItem("SET_TARGET_USER", JSON.stringify(targetUser));
}
};
export default new Vuex.Store({
state,
mutations,
getters,
actions,
});取值:
this.$store.getters.targetUser看完上述内容，你们对如何在Vuex中使用actions属性有进一步的了解吗？如果还想了解更多知识或者相关内容，请关注亿速云行业资讯频道，感谢大家的支持。
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
