vuex 书写流程

新建store文件夹
新建index.js ,mutations.js,actions.js,getters.js

其中index.js为如下代码

import Vue from "vue";
import Vuex from "vuex";
import * as getters from "./getters";
import * as mutations from "./mutations";
import * as actions from "./actions";
Vue.use(Vuex);
// console.log(Cookies.get('userinfo'))
var state = {
  userHeadPath:JSON.parse(localStorage.getItem("userHeadPath")),  //登录用户头像
   chatlist: JSON.parse(localStorage.getItem("chatlist")),//聊天列表
}
export default new Vuex.Store({
  namespaced: true,
  state,
  getters,
  mutations,
  actions,
  modules: {}
});

其中mutation.js代码如下

export const setUserHeadPath = (state, data) => {
  state.userHeadPath = data;
  localStorage.setItem("userHeadPath", JSON.stringify(data));
};
export const setChatList = (state, data) => {
  state.chatlist = data;
  localStorage.setItem("chatlist", JSON.stringify(data));
};

其中 actions.js的代码如下

export const SetUserHeadPath = ({ commit }, data) => {
  commit("setUserHeadPath", data);
};
// 设置聊天列表
export const SetChatList = ({ commit }, data) => {
  commit("setChatList", data);
};

其中getters.js的代码如下

export const userHeadPath = (state) => state.userHeadPath;
export const chatlist = (state) => state.chatlist;// 设置聊天列表