标签：状态 管理 RECEIVE token userlian state USER commit vuex

一. state单一状态树

Vuex 使用单一状态树——是的，用一个对象就包含了全部的应用层级状态。至此它便作为一个“唯一数据源 (SSOT (opens new window))”而存在。

export default {
  userList: {},
  userlian: {},
  token: localStorage.getItem("token") || "",
};

二.mutation-types

export const RECEIVE_USER_LIST = "receive_user_list"; //接收用户基本信息
export const SET_TOKEN = "set_token"; //记录token
export const RECEIVE_USER_LIAN = "set_user_lian"; //记录手机联系人

三.mutations

更新state多个方法对象

import { RECEIVE_USER_LIST, RECEIVE_USER_LIAN } from "./mutation-types";
export default {
  // 用户基本信息
  [RECEIVE_USER_LIST](state, { userList }) {
    state.userList = userList;
  },
  // 联系人
  [RECEIVE_USER_LIAN](state, { userlian }) {
    state.userlian = userlian;
  },
  SET_TOKEN: (state, token) => {
    state.token = token;
  },
};

四.actions

通过mutation间接更新state多个方法对象

import { RECEIVE_USER_LIST, RECEIVE_USER_LIAN } from "./mutation-types";
import { reqinformation, reqTel } from "../api";
export default {
  // 同步记录用户基本信息
  recordList({ commit }, userList) {
    commit(RECEIVE_USER_LIST, { userList });
  },
  // 异步获取用户基本信息
  async getuserLists({ commit }) {
    // 发送异步ajax请求
    const result = await reqinformation();
    if (result.code1 === 0) {
      const userList = result.data;
      commit(RECEIVE_USER_LIST, { userList });
    }
  },
  // 同步记录手机联系人
  recorduserlian({ commit }, userlian) {
    commit(RECEIVE_USER_LIAN, { userlian });
  },
  // 异步获取手机联系人
  async getuserlian({ commit }) {
    // 发送异步ajax请求
    const result = await reqTel();
    if (result.code1 === 0) {
      const userlian = result.data;
      commit(RECEIVE_USER_LIAN, { userlian });
    }
  },
  setToken(context, token) {
    context.commit("SET_TOKEN", token);
  },
};

五.index.js

这里是自动生成的不需要改变

import Vue from "vue";
import Vuex from "vuex";
import state from "./state";
import mutations from "./mutations";
import actions from "./actions";

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions,
  modules: {},
});

目录结构

传送门:vuex

标签：状态,管理,RECEIVE,token,userlian,state,USER,commit,vuex
来源： https://blog.csdn.net/ChangRongXin/article/details/117092808

本站声明： 1. iCode9 技术分享网（下文简称本站）提供的所有内容，仅供技术学习、探讨和分享；
2. 关于本站的所有留言、评论、转载及引用，纯属内容发起人的个人观点，与本站观点和立场无关；
3. 关于本站的所有言论和文字，纯属内容发起人的个人观点，与本站观点和立场无关；
4. 本站文章均是网友提供，不完全保证技术分享内容的完整性、准确性、时效性、风险性和版权归属；如您发现该文章侵犯了您的权益，可联系我们第一时间进行删除；
5. 本站为非盈利性的个人网站，所有内容不会用来进行牟利，也不会利用任何形式的广告来间接获益，纯粹是为了广大技术爱好者提供技术内容和技术思想的分享性交流网站。