vuex刷新数据丢失方法

版权声明：本文为博主原创文章，未经博主允许不得转载。 https://blog.csdn.net/yhflyl/article/details/88973397

vuex

问题： 当刷新页面的时候vuex仓库中的数据丢失

解决方法

1、使用localStorage

2、使用sessionStorage

个人建议

对于localStorage的数据是永久保存（自己不去删除的时候），所以个人觉得不是很安全，所以使用sessionStorage比较合适。

具体使用

mutations: {
    // 菜单信息
    getMenuItems (state, payload) {
        const menuItems = payload
        // 将js对象转为字符串
        sessionStorage.setItem('menuItems', JSON.stringify(menuItems))
        state.menuItems = menuItems
    }
}

在getter中使用

getters: {
    getMenuItems: state => sessionStorage.getItem('menuItems') ? JSON.parse(sessionStorage.getItem('menuItems')) : state.menuItems,
}

完整代码

import { GETMENU } from '@/api/login'
const login = {
  state: {
    menuItems: []
  },
  getters: {
    getMenuItems: state => sessionStorage.getItem('menuItems') ? JSON.parse(sessionStorage.getItem('menuItems')) : state.menuItems
  },
  actions: {
    sendMenuItems ({ commit }, payload) {
      return GETMENU(payload).then((res) => {
        if (res.success) {
          commit('getMenuItems', res.data)
        }
      })
    }
  },
  mutations: {
    getMenuItems (state, payload) {
      const menuItems = payload
      sessionStorage.setItem('menuItems', JSON.stringify(menuItems))
      state.menuItems = menuItems
    }
  }
}

export default login

当你刷新页面的时候就不会出现数据丢失的问题了。