用Vuex 保存到localstorage中 步骤

嘻嘻，第一次写这种文章，本人小菜鸟记载一下自己遇到的问题，方便自己下次使用！！！！！！！！！！！
ok，话不多说，关于Vuex 保存到 localstorage中 步骤

第一步：

已经有vue 的相关的环境
安装vuex

 npm install vuex --save

第二步

在src 文件夹中创建一个新的文件夹，命名为store ,目录下创建一个index.js文件

 import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

const actions = {}
const mutations = {
  handleUserName: (state, username) => {
    state.username = username
    // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值（初始值为空）的情况
    localStorage.setItem('username', username)
  },
  handleUserPass: (state, userpass) => {
    state.userpass = userpass
    // 把登录的用户的名保存到localStorage中，防止页面刷新，导致vuex重新启动，用户名就成为初始值（初始值为空）的情况
    localStorage.setItem('userpass', userpass)
  }
}
const state = {
  username: '' || localStorage.getItem('username'),
  userpass: '' || localStorage.getItem('userpass')
}
// getters 只会依赖 state 中的成员去更新
const getters = {
  username: (state) => state.username,
  userpass: (state) => state.userpass
}
const store = new Vuex.Store({
  actions,
  mutations,
  state,
  getters
})
export default store

第三步

在main.js中导入 自己创建的store下面的index.js这个文件

import store from './store/index'

//在这个里面一定要记得加上 store,我就是忘记了所以会出现什么commit 未定义啥的

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

第四步

在登录页面添加以下代码 即可

//上面这些不是重点哈，往下面看一波，biu~  可能有些代码看着很麻烦，嘻嘻，可以指出简洁的方法，努力改正
api.getLogin({u:this.username,v:this.userpass,validateCode:2,rememberMe:false}).then(res=>{
         if(res.data.errmsg == '用户登陆成功'){
           this.userInfo = res.data.result
           this.$message({
             message: res.data.errmsg,
             type: 'success'
           })
           var that = this
           //这一部分就是跳转页面，可以不用管
           setTimeout(function(){
             that.$router.push({
               path: '/main',
               name: 'main',
             })
           },1000)

           //这里才是重点，添加这里代码到登录，请求的位置
           
           //下面这个不知道是干嘛的，有点儿迷
         localStorage.setItem('data',res.data.result)    
           // 将登录名使用vuex传递到Home页面
           this.$store.commit('handleUserName',res.data.result.loginName); 
           //handleUserName 这个是store里面的方法名，后面就是值 就是username那一坨，这里就是从登录那儿获取了登录名
           this.$store.commit('handleUserPass',res.data.result.password);
            //这里是重点结束的位置

         }
         else{
           this.$message.error(res.data.result)
         }
       })

最后一步就是在你的页面需要显示用户名的位置添加这样一行代码即可

{{$store.getters.username}}

图片，示例图

ok,ok,ok,ok结束！！！！！