Vuex刷新数据丢失问题配合sessionStorage，来实现数据不丢失保持最新数据

最新推荐文章于 2024-05-20 15:02:57 发布

坏人OvO

最新推荐文章于 2024-05-20 15:02:57 发布

阅读量354

点赞数

分类专栏： vuex 文章标签： vue.js javascript 前端

本文链接：https://blog.csdn.net/MM_520131400/article/details/122239381

版权

vuex 专栏收录该内容

3 篇文章 0 订阅

订阅专栏

案例

在App.vue添加如下代码

export default {
   created () {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
       this.$store.replaceState(
         Object.assign(
          {},
          this.$store.state,
          JSON.parse(sessionStorage.getItem("store"))
         )
       );
      //刷新完成之后数据存在vuex里，然后再把浏览器sessionStorage数据删除，这样相对安全些
       sessionStorage.clear()
     }

     //在页面刷新时将vuex里的信息保存到sessionStorage里
     window.addEventListener("beforeunload", () => {
       sessionStorage.setItem("store", JSON.stringify(this.$store.state));
     });
  }
}

store创建 modules文件夹（存放模块的store）和index.js
a. index.js如下代码

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

const modulesFiles = require.context("./modules", true, /\.js$/);

const modules = modulesFiles.keys().reduce((modules, modulePath) => {

const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, "$1");
const value = modulesFiles(modulePath);
modules[moduleName] = value.default;
return modules;
}, {});

const store = new Vuex.Store({
modules
});

export default store;

b. modules文件夹创建utils.js

const state = {
  bookList: [],
  num: 0
};
const getters = {
  num: state => state.num * 2,
};

const mutations = {
  SET_LIST: (state, list) => {
    state.bookList = list;
  },
  EDIT_NUM:(state,num) =>{
      state.num = num
  }
};

const actions = {
  //方式一
  Action: (context, list) => {
    context.commit("SET_LIST", list);
  },
  ActionNum: (context, num) => {
    context.commit("EDIT_NUM", num);
  }
};

export default {
  namespaced: true,
  state,
  getters,
  mutations,
  actions
};

页面引用

<template>
  <div class="home">
    {{bookList}}
    <p>{{num}}</p>
    <button @click="handlePush">点击变换</button>
  </div>
</template>


import { mapState, mapGetters, mapActions } from 'vuex'
export default {
  data () {
    return {
      list: ["哲学", "生活", "自律", "三体","哲理"]
    }
  },
 computed: {
   
    ...mapState("utils", ["bookList"]),

    ...mapGetters("utils", ["num"]),

  },
  methods: {
   
  
    ...mapActions("utils", ["Action","ActionNum"]),

    handlePush () {
      this.Action(this.list)
      this.ActionNum(2)
      
    }
  },
}