登錄后用戶信息存儲vuex，刷新數據丟失

npm install vuex --save

main.js

import store from './store/index.js'
 
new Vue({
  el: '#app',
  router,
  store,
  components: { App },
  template: '<App/>'
})

store.js

// index.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    userInfo: JSON.parse(sessionStorage.getItem('userData')),
  },
  getters: {
    userInfo: state =>{
      if(!state.userInfo){
        state.userInfo = JSON.parse(sessionStorage.getItem('userData'))
      }
      return state.userInfo
    },
  },
  mutations: {
    getUserInfo(state,data){
      state.userInfo = data
      sessionStorage.setItem('userData', JSON.stringify(data))
    },
  },
  actions: {
    getUserInfo(context){
      context.commit('getUserInfo')
    },
  }
})

login.vue

<template>
<div>
  <input v-model="username" type="text">
  <input v-model="password" type="text">
  <div @click="login">點擊登錄</div>
</div>
</template>

<script>
import {mapState, mapMutations} from 'vuex'
export default {
  data(){
    return {
      userInfo: null,
      username: '',
      password: '',
    }
  },
  methods: {
    ...mapMutations(['getUserInfo','getNum']),
    login(){
      this.userInfo = {
        name: this.username,
        age: this.password,
        roles: ['create', 'delete']
      }
      // sessionStorage
      sessionStorage.setItem('userData', JSON.stringify(this.userInfo));  
      // vuex
      this.getUserInfo(this.userInfo) this.$router.push({
        path: '/test'
      })
    },
    addNum(){
      this.getNum()
    }
  }
}
</script>

<style>

</style>

退出

oueLogin(){
      sessionStorage.removeItem('userData')
      this.getUserInfo(null)
      this.$router.push('/')
    }