Vuex二次封装，直接渲染页面，刷新界面不丢失。

开门见山地说，我们在使用Vuex的时候，经常会遇到使用方式麻烦，刷新之后Vuex丢失等问题。

目录结构以及main.js配置.

image.png

在src文件夹中新建store文件夹，新建index.js，vuex_list.js

index.js

import Vue from 'vue';
import Vuex from 'vuex';
import {
  mapState
} from 'vuex';
import vuex_list from './vuex_list'
Vue.use(Vuex);
//公共变量对象 
var lifeData = {};
try {
  // 尝试获取本地是否存在lifeData变量
  // lifeData = localStorage.getItem('lifeData');
  if (localStorage.getItem('lifeData')) {
 lifeData =JSON.parse(localStorage.getItem('lifeData')) 
  }
} catch (e) {

}
// 需要永久存储，且下次APP启动需要取出的，在state中的变量名
let saveStateKeys = vuex_list;
// 保存变量到本地存储中
const saveLifeData = (key, value) => {
  // 判断变量名是否在需要存储的数组中
  // console.log(key,value);
  if (saveStateKeys.indexOf(key) != -1) {
    // 获取本地存储的lifeData对象，将变量添加到对象中
    let tmp = localStorage.getItem('lifeData');
    // 第一次打开APP，不存在lifeData变量，故放一个{}空对象
    tmp = tmp ? JSON.parse(tmp) : {};
    tmp[key] = value;

    let jsonstr = JSON.stringify(tmp)
    // // 执行这一步后，所有需要存储的变量，都挂载在本地的lifeData对象中
    localStorage.setItem('lifeData', jsonstr);
  }
}

let stateobj = {}
saveStateKeys.forEach(ele => {
  stateobj[ele] = lifeData[ele] || {}
});


const store = new Vuex.Store({
  // 下面这些值仅为示例，使用过程中请删除
  state: stateobj,
  mutations: {
    savestore(state, payload) {
      // 判断是否多层级调用，state中为对象存在的情况，诸如user.info.score = 1
      let nameArr = payload.name.split('.');
      let saveKey = '';
      let len = nameArr.length;

      if (nameArr.length >= 2) {
        let obj = state[nameArr[0]];
        for (let i = 1; i < len - 1; i++) {
          obj = obj[nameArr[i]];
        }
        obj[nameArr[len - 1]] = payload.value;
        saveKey = nameArr[0];
      } else {
        // 单层级变量，在state就是一个普通变量的情况
        state[payload.name] = payload.value;
        saveKey = payload.name;
      }
      // 保存变量到本地，见顶部函数定义
      // console.log(payload);
      saveLifeData(payload.name, payload.value)
    }
  }
})

// 尝试将vuex的state变量，全部加载到全局变量中
var uStoreKey = [];
try {
  uStoreKey = store.state ? Object.keys(store.state) : [];
  console.log(uStoreKe, '123');
} catch (e) {}
Vue.mixin({
  created() {
    // 将vuex方法挂在到$louisvuex中
    Vue.prototype.$louisvuex = (name, value) => {
      store.commit('savestore', {
        name,
        value
      })
    }
  },
  computed: {
    // 将vuex的state中的所有变量，解构到全局混入的mixin中
    ...mapState(uStoreKey)
  }
});


export default store

vuex_list.js

let vuex_list = [
    'vuex_token',
    'vuex_louis',
    'vuex_apilist'
  ];
  export default vuex_list

7f5c005d53197ccbeee1e28db3601ea.jpg

在vue中使用
因为我们已经挂载了原型，$louisvuex
直接在vue中使用

this.$louisvuex("key", value);

image.png

渲染的时候十分简单

image.png

image.png

你也可以在JS中直接获取

console.log(this.$store.state);

仔细阅读Vue的文档，我想你会乐在其中的。

[图片上传中...(微信截图_20200908180324.png-b4d83e-1599559413154-0)]

[图片上传中...(QQ图片20200901094952.jpg-e18abe-1599559426490-0)]

微信截图_20200908180324.png