Vuex保存登录状态

Vuex保存登录状态

1、创建state.js

const state={
    userInfo:''
   }
   export default state; 

2、创建multation.js

const mutations={
    login(state,v){
     state.userInfo=v;
    }
   }
   export default mutations;

3、创建index.js

import Vuex from 'vuex'
import state from './state'
import mutations from './multation'

const store =new Vuex.Store({
  state,
  mutations
})
export default store;

4、目录结构如下，在main.js中导入index，这样才能全局使用

5、在login.js中用this.$store.commit('login',this.username);
把登录需要存的信息存入vuex的状态当中。比如我想存的是用户名。

6、然后就可以在项目的任意组件使用了。
用this.$store.state.userInfo我就可以获取到用户名了。

最终效果如图：姓名就可以动态显示出来了。