欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

Vuex防止数据丢失!!!

程序员文章站 2024-02-04 20:10:10
...

Vuex防止数据丢失!!!

众所周知在Vuex中存储数据时,当刷新页面就会导致Vuex中的数据丢失,为防止Vuex中的数据丢失,我们可以把Vuex中的数据同步到浏览器的sessionStorage中,每当页面刷新,就从浏览器的sessionStorage中获取数据加载到Vuex中,代码如下:

import {mapState,mapMutations} from 'vuex'
export default {
  mounted() {
    //如果vuex中没有数据
    //从sessionStorage获得数据,并填充到vuex
    let userStr = sessionStorage.getItem('user')
    if(userStr){
      //将字符串 转换json对象
      let userObj = JSON.parse(userStr)
      //将数据保持到vuex
      console.log(userObj)
      this.setData({'key':'user','value':userObj})
    }
  },
  methods: {
    ...mapMutations(['setData']),
  },
}

store/index.js

export const state = () => ({
    user:null,
})
export const mutations = {
    setData(state,obj){
        state[obj.key] = obj.value;
    }
}
相关标签: Nuxt.js vue