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 语法，有三种状态：

 index.vue：

2 Callback 方式

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

main.js

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

index.vue：

3 效果

vuex action和mutations的区别

action的功能和mutation是类似的，都是去变更store里的state，不过action和mutation有两点不同：

1、action主要处理的是异步的操作，mutation必须同步执行，而action就不受这样的限制，也就是说action中我们既可以处理同步，也可以处理异步的操作

2、action改变状态，最后是通过提交mutation

使用方式: 

安装:

npm install vuex --save

引用:

store.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

import Vue from "vue";
import Vuex from "vuex";
// 持久存储插件
import createPersistedState from "vuex-persistedstate";
 
//使用vuex
Vue.use(Vuex);
 

 
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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。