Vuex的actions属性的具体使用

这篇文章主要介绍了Vuex的actions 属性的具体使用，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧

Vuex 的 action 属性内，可以定义异步操作逻辑，以满足某些业务场景要求。在组件内，是通过 $store.dispatch 来触发 action 定义的函数。

我们使用 action，来为计数器异步增 1。

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：

   {{count}}

2 Callback 方式

也可以使用普通回调来实现异步方案。

main.js

 const store = new Vuex.Store({ ... actions: { ... asyncInrement2(context, callback) { setTimeout(() => { context.commit('increment'); callback(); }, 1000); } } });

index.vue：

   ... {{count}}

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

取值: