vuex actions使用(action和mutations的区别)

我们先说说actions和mutations的区别,mutations在请求数据的时候是同步的;而actions是异步的

 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