vuex存储用户信息，保存用户登录信息

目录

 vuex存储用户信息封装：

1.新建user.js：

2.store/index.js引入：

3.main.js引入store文件 ：

4.组件中login.vue中调用：

 vuex存储用户信息封装：

 Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式 + 库。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

1.新建user.js：

const user = {
  state:{
    user:""
  },
  mutations:{
    USER_INFO(state,info){
      state.user = info
    }
  },
  actions:{
    saveUserInfo({ commit },data){
      commit('USER_INFO',data)
    }
  }
};
export default user

2.store/index.js引入：

import Vue from 'vue';
import Vuex from 'vuex';
import user from './user';

Vue.use(Vuex);

const store = new Vuex.Store({
  modules:{
    user
  }
});
export default store

3.main.js引入store文件 ：

import Vue from 'vue'
import App from './App'
import router from './router'
import store from './store'
...

//挂载
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

4.组件中login.vue中调用：

//this.$store.dispatch('saveUserInfo',response.data.data);//请求回来后，把用户信息存储到VUEX里

 

⭐️⭐️⭐️  作者：船长在船上
🚩🚩🚩  主页：来访地址船长在船上的博客

🔔🔔🔔   感谢：如果觉得博主的文章不错或者对你的工作有帮助或者解决了你的问题，可以关注、支持一下博主，如果三连收藏支持就会更好，在这里博主不胜感激！！！如有疑问可以留言、评论，看到后会及时回复。