配置Vuex框架，使用Vuex状态管理，localStorage，beforeEnter导航守卫，首页保存用户信息，用户刷新，防止昵称头像丢失问题

概要

配置Vuex框架，使用Vuex状态管理，localStorage，beforeEnter导航守卫，首页保存用户信息，用户刷新，防止昵称头像丢失问题

例如：存储用户的基本信息头像和昵称

配置Vuex：

main.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import ElementUI from 'element-ui';
import 'element-ui/lib/theme-chalk/index.css';
import '../src/assets/global.css'
//小版类型组件
Vue.use(ElementUI,{size:"mini"})
// Vue.use(ElementUI)
import Element from "element-ui";
import Cookies from "js-cookie";

// Vue.use(Element, {
//   size: Cookies.get("size") || "medium", // set element-ui default size
// });


Vue.config.productionTip = false

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

store目录下：

index.js

import Vue from 'vue'
import Vuex from 'vuex'
import getters from "@/store/getters";
import user from "@/store/modules/user";

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    //这个是modules目录下的文件
    user
  },
  getters
})

     getter.js

const getters = {
    userInfo_data:state=>state.user.data
}
export default getters

modules目录下的user.js

const state = {
    data:null
}

const mutations = {
    SET_USER_DATA:(state,payload) =>{
        state.data = payload;
    }
}

const actions = {
    setUserData({ commit }, payload) {
        commit('SET_USER_DATA', payload)
    }
}

export default {
    namespaced: true,
    state,
    mutations,
    actions
}

登录接口准备调用配置好的Vuex进行存储:

以下接口搭配了localStorage和beforeEnter导航守卫进行存储用户信息，防止用户在首页刷新用户基本信息丢失：

          //校验完毕调用登录接口
          userLogin(this.loginForm).then(res=>{
            if(res.data.code != 200){
              const errorMessage = res.data.msg
              message(false,errorMessage,"error",true)
            }else {
              // 设置token 存入本地浏览器token
              setToken("token",res.data.data.token)

              //存到本地浏览器，路由跳转的时候，在获取更新到Vuex
              localStorage.setItem('userInfoData', JSON.stringify(res.data.data))

              message(false,"恭喜您，登录成功了哦","success",true)
              // 把用户的信息并存储到Vuex 并且跳到首页
                this.$store.dispatch("user/setUserData",res.data.data).then(()=>{
                  this.$router.push({path:'/'})
              })

            }
          })

route目录下index.js

{
    path: '/',
    name: 'home',
    component: () => import('@/views/HomeView.vue'),
    
    // 导航守卫
    beforeEnter: (to, from, next) => {
      // 检查本地存储是否有数据
      const savedData = localStorage.getItem('userInfoData');
      if (savedData) {
        // 如果有保存的数据，则触发 action 更新 Vuex 中的数据
        store.dispatch('user/setUserData', JSON.parse(savedData))
            .then(() => {
              // 继续导航
              next();
            });
      } else {
        // 没有保存的数据，直接继续导航
        next();
      }
    },
  },

获取用户信息数据：

this.userInfoForm  = this.$store.getters.userInfo_data;

userInfoForm: {
  id:'',
  head:'',
  nickName:''
},

this.userInfoForm这里对象里面就是你需要存的数据，例如头像，昵称等