解决Vuex刷新后数据丢失的方法

原因

因为store里的数据是保存在运行内存中的,当页面刷新时，页面会重新加载Vue实例，store里面的数据就会被重新赋值初始化

解决思路

将state的数据保存在localstorage、sessionstorage或cookie中，这样即可保证页面刷新数据不丢失且易于读取

• localStorage

  ​ localStorage的生命周期是永久的，关闭页面或浏览器之后localStorage中的数据也不会消失.localStorage除非主动删除数据，否则数据永远不会消失

• sessionStorage

  ​ sessionStorage的生命周期是在仅在当前会话下有效。sessionStorage引入了一个“浏览器窗口”的概念，sessionStorage是在同源的窗口中始终存在的数据。只要这个浏览器窗口没有关闭，即使刷新页面或者进入同源另一个页面，数据依然存在。但是sessionStorage在关闭了浏览器窗口后就会被销毁。同时独立的打开同一个窗口同一个页面，sessionStorage也是不一样的

• Cookie

  ​ Cookie生命期为只在设置的Cookie过期时间之前一直有效，即使窗口或浏览器关闭。 存放数据大小为4K左右,有个数限制（各浏览器不同），一般不能超过20个。缺点是不能储存大数据且不易读取

由于sessionStorage能保存的数据比Cookie对,且不用像localStorage每次打开页面需要清空之前的数据,所以sessionStorage是最好的选择

<template>
  <div id="app">
    <h1>My name is {{name}}</h1>
   <button @click="updata">更新</button>
  </div>
</template>

<script>
import {mapMutations} from 'vuex';
export default {
  name: "App",
  data:()=>({
    name: 'Guiyun'
  }),
  components: {
  },
  created(){
    this.getName()
  },
  methods:{
    getName(){
      if (sessionStorage.getItem("name")){
        this.name = sessionStorage.getItem("name")
      }
    },
    updata(){
      sessionStorage.setItem('name', '归云');
       this.getName()
    }
  }
};
</script>