Vuex数据刷新后，如何做持久化处理

前言

今天做vue项目时需要实现多个组件的数据同步，首当其冲选择了vuex。
vuex介绍：参考
项目需求：在用户管理界面更改用户名及其头像成功时，主界面home的用户和头像要同步更新。

分析

  首先明确一点js代码是运行在内存中的，代码运行时的所有变量、函数也都是保存在内存中的。刷新页面，以前申请的内存被释放，重新加载脚本代码，变量重新赋值，所以这些数据要想存储就必须存储在外部，例如：Local Storage、Session Storage等。
  回到项目中，当我修改用户信息后一定会调用init方法刷新页面，此时如果不作数据持久化处理，主页面的用户内容(通过vuex获取的)都会被初始化为空，这肯定不是我们想要的，那么持久化存储用哪一种，个人认为用Session Storage好一点，因为当session失效后存储的数据自然也会被清空。

操作

（1）安装vuex

cnpm install vuex --save

（2）src文件夹下创建store目录，创建store.js文件

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

Vue.use(Vuex)
const store = new Vuex.Store(
  {
    //定义用户对象
    state:{
      manage:{}
    },
    //定义更新用户对象的方法 注意：更新的同时要做持久化处理
    mutations:{
      initManage(state,data){
        //存储在sessionStorage的内容要序列化成json
        window.sessionStorage.setItem("manage",JSON.stringify(data));
        state.manage = data;
      }
    },
    actions:{

    }
  }
)
export default store;

（3）main.js引入store.js

import Vuex from 'vuex'
import store from './store/store'
Vue.use(Vuex)
new Vue({
  router,
  store,
  render: function (h)
  { return h(App) }
}).$mount('#app')

(4)以上配置完成，下面我们需要在业务部分使用，先看用户信息的更新部分

editManage(){
      var fd = new FormData();
      fd.append("manage",JSON.stringify(this.editForm));
      fd.append("image",this.editImageFile.raw);
      this.putRequest("/manage/",fd).then(resp=>{
        if(resp){
          //修改成功后，同步更新
          this.$store.commit('initManage',resp.obj);
          this.currentUsername = resp.obj.name;
          this.initManage();
        }
        this.editDialogVisible = false
      })
    },

（5）主界面home部分，初始化当前用户信息

//vue的生命周期函数
  created(){
    //每次初始化一定要从sessionStorage获取，并存储在store中
    var obj = JSON.parse(window.sessionStorage.getItem('manage'));
    this.$store.commit('initManage',obj);
  }

主界面对用户信息进行监控

 computed:{
    manage(){
      return this.$store.state.manage;
    },
  },

用户信息的展示与数据绑定

 <el-dropdown class="userInfo" @command="handleCommand">
          <span class="el-dropdown-link">
          <!--用户名与头像展示部分-->
            {{this.$store.state.manage.name}}<img :src=" this.$store.state.manage.userface" alt="">
          </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="userinfo">个人中心</el-dropdown-item>
              <el-dropdown-item command="setting">修改密码</el-dropdown-item>
              <el-dropdown-item command="logout" divided>注销登录</el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>

总结

如有任何问题欢迎评论，我会及时回复谢谢。