Vueプロジェクトはlocal Storrage+Vuexを使ってユーザー登録情報を保存します。


本論文の例では、Vueはlocal Strage+Vuexを使ってユーザー登録情報を保存する具体的なコードを共有しています。
appi.js

import axios from 'axios'
const baseURL = 'http://XXX

//     axios    
axios.defaults.baseURL = baseURL

//     
const loginCheck = params => {
  return axios.post('/login', params).then(res => {
    return res.data
  })
}
export { loginCheck }
store.js

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const actions = {}
const mutations = {
  handleUserName: (state, user_name) => {
    state.user_name = user_name
      //            localStorage ,      ,  vuex    ,         (     )   
    localStorage.setItem('user_name', user_name)
  }
}
const state = {
  user_name: '' || localStorage.getItem('user_name')
}
// getters      state        
const getters = {
  userName: (state) => state.user_name
}

const store = new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})
export { store }

login.vue

methods:{
  login(formName){
   this.$refs[formName].validate((valid) => {
     if (valid) {
      //         
      loginCheck(this.form).then(res=>{
      //  console.log(res);
       //     ,      ,       ,   token   localstorage ,       vuex   Home  
       if(res.meta.status === 200){
        //       
        this.$message({
          message: res.meta.msg,
          type: 'success'
        });
        var that = this;
        //      
        setTimeout(function(){
          that.$router.push({name:'Home'})
        },1000)
        localStorage.setItem('token',res.data.token)
        //       vuex   Home  
        this.$store.commit('handleUserName',res.data.username);
       }else{
        //     ,       
        this.$message({
          message: '    ,'+res.meta.msg,
          type: 'error'
        });
       }
      })
     } else {
      
      return false;
     }
    });
  }
 }
Home.vue

  ,{{$store.getters.username}}
以上が本文の全部です。皆さんの勉強に役に立つように、私たちを応援してください。