[vue] 页面刷新后vuex的state数据丢失怎么解决？

[haizhilin2013]

[vue] 页面刷新后vuex的state数据丢失怎么解决？

[wenyejie]

一般来说, 可以考虑react的状态管理, 他是直接存储在storage里面

[forever-z-133]

好像还是得靠 localStorage，在 mutations 里面得加些缓存相关代码

[slmyer]

就是放在localStorage 或者就是sessionStorage ，或者借用辅助插vuex-persistedstate

[StonePang]

首先要搞清楚为什么state数据会丢失。

通常情况state里的初始数据是空，通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件（组件A）的生命周期或者事件中调用。如果在刷新页面的时候这些方法没有被调用（例如此时页面中没有组件A，或组件A的对应事件没有被触发），那么就没有获取实际数据，state的数据就是初始的空。

对症下药，就是要确保刷新页面以后调用对应的获取数据方法。 最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面，总会执行。

个人理解，轻拍。

[XSJXSJ111]

个人做法是在组件的生命周期created()里调用actions里的获取收据方法fetchData(),然后fetchData()里面判断state里面有没数据，有的话return，没有的话就请求接口获取数据，这样每次刷新页面或者重新进入页面既能保证state里有需要的数据，又能不调用多余的请求

[desireYoo]

vuex-persistedstate的createPersistedState()方法，谁用谁知道

[impeiran]

首先要搞清楚为什么state数据会丢失。

通常情况state里的初始数据是空，通过mutation或者action的方法获取实际数据后存放在state中。这些方法往往是在某个组件（组件A）的生命周期或者事件中调用。如果在刷新页面的时候这些方法没有被调用（例如此时页面中没有组件A，或组件A的对应事件没有被触发），那么就没有获取实际数据，state的数据就是初始的空。

对症下药，就是要确保刷新页面以后调用对应的获取数据方法。 最万金油的解决是在App.vue的mounted生命周期中去调用这些方法。不管在哪个路由下刷新页面，总会执行。

个人理解，轻拍。

他的意思是F5那种刷新。。占用的内存重新释放了

[WenJieLi1998]

监听浏览器刷新前的事件，在浏览器刷新之前就把vuex里的数据保存至sessionStorage中，刷新成功后如果异步请求的数据还没返回则直接获取sessionStorage里的数据，否则获取vuex里的数据。

[tzzhmm]

个人做法： 1、每次在mutation中set state的时候，同步的塞到sessionStorage一份 2、状态初始化的时候，从sessionStorage中读取相应内容并作为默认值(存在的话)

[haxuhaibing]

//App.vue  
  <template>
  <router-view />
  <cFooter v-if="this.$route.meta.isFooter"></cFooter>
</template>

<script lang="ts">
import { Options, Vue } from "vue-class-component";
import cFooter from "@/components/cFooter.vue";
@Options({
  components: { cFooter },
})
export default class App extends Vue {
  $store!: any;
  mounted() {
    //在页面加载时读取sessionStorage里的状态信息
    if (sessionStorage.getItem("store")) {
      let store: any=sessionStorage.getItem("store");
      this.$store.replaceState(
        Object.assign(
          {},
          this.$store.state,
          JSON.parse(store)
        )
      );
    }

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

<style lang="scss">
#app {
  overflow-x: hidden;
}
</style>

[Drikold]

封装具体数据的 localStorage或者sessionStorage或cookies； 在vuex中的state定义的时候，调用getXXX()；action中异步执行完毕调用setXXX()

[yxllovewq]

监听beforeunload事件，在刷新页面之前将store的数据存储到本地，在app.vue的created里检查如果本地存储有store，则将本地的store替换掉vuex的store，用replaceStore。