解决VUEX页面刷新数据丢失问题

在store中index.js引入vuex，再导入对应模块，暴露出去

import Vue from 'vue'
import Vuex from 'vuex'
import num from "./modules/num"
import price from "./modules/price"

Vue.use(Vuex)

// export default new Vuex.Store({
//   modules: {
//     num
//   }
// })
const store = new Vuex.Store({
  modules: {
    num,
    price
  }
})
export default store

然后在moudles中创建对应模块

在getter.js中 计算每一个state值

const getters = {
  number: state => state.num.number,
  calePrice: state => state.price.calePrice,
  addPrice: state => state.price.addPrice,
  subPrice: state => state.price.subPrice,
  subNPrice: state => state.price.subNPrice
}
export default getters

这里以price.js作为例子，创建price模块，管理状态

const price = {
  state:{
    calePrice:0,
    addPrice:0,
    subPrice:0,
    subNPrice:0
  },
  mutations:{
    add1(state,temp){
      state.calePrice += temp
      // sessionStorage.setItem("store",JSON.stringify(state))
    },
    addN(state,temp){
      state.addPrice += temp
    },
    sub1(state,temp){
      state.subPrice -= temp
    },
    subN(state,temp){
      state.subNPrice = state.subNPrice - temp
    }
  },
  actions:{
    asyncAdd1(context,temp){
      context.commit("add1",temp)
    },
    asyncAddN(context,temp){
      context.commit("addN",temp)
    },
    asyncsub1(context,temp){
      context.commit("sub1",temp)
    },
    asyncsubN(context,temp){
      context.commit("subN",temp)
    }
  }
}
export default price

最后页面使用vuex状态

<template>
  <div class="about">
    <router-link to="/">跳转到首页</router-link>
    <div class="box">
      <button @click="addOne">点击加1</button>
      <p>当前数量为{{this.$store.state.price.calePrice}}</p>
    </div>
    --------------------------------------------------------------
    <div class="box">
      <button @click="addThree">点击加3</button>
      <p>当前数量为{{this.$store.state.price.addPrice}}</p>
    </div>
    --------------------------------------------------------------
    <div class="box">
      <button @click="subOne">点击减1</button>
      <p>当前数量为{{this.$store.state.price.subPrice}}</p>
    </div>
    --------------------------------------------------------------
    <div class="box">
      <button @click="subThree">点击减3</button>
      <p>当前数量为{{this.$store.state.price.subNPrice}}</p>
    </div>
    --------------------------------------------------------------
  </div>
</template>
<script>
export default {
  data() {
    return {
      num:""
    };
  },
  created() {
    this.num = this.$store.state.price.calePrice
  },
  methods: {
    addOne(){
      this.$store.dispatch("asyncAdd1",1)
    },
    addThree(){
      this.$store.dispatch("asyncAddN",3)
    },
    subOne(){
      this.$store.dispatch("asyncsub1",1)
    },
    subThree(){
      this.$store.dispatch("asyncsubN",3)
    }
  },
};
</script>
<style lang="less">
.about{
  width: 100%;
  height: 800px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.box {
  width: 20%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
</style>

最后做重要的一点，解决刷新数据丢失问题

在app.vue中

<template>
  <div id="app">
    <router-view/>
  </div>
</template>
<script>
export default {
  name: 'App',
  created () {
    //在页面加载时读取sessionStorage里的状态信息,然后删除sessionStorage
    if (sessionStorage.getItem("store") ) {
        this.$store.replaceState(Object.assign({}, this.$store.state,JSON.parse(sessionStorage.getItem("store"))))
        sessionStorage.removeItem("store")
    } 

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

然后就解决了刷新数据丢失问题了！