Vuex中的$store.state和Storage的区别

1、存储位置及类型：

Storage 是存在本地缓存；

Vuex 是存储在内存中。

localStorage 和 sessionStorage 只能存储字符串类型，对于复杂的对象可以封装storage

2、实效性：

localStorage（本地存储）存储在本地，永久保存；

sessionStorage（会话存储），临时保存，页面关闭即失效；

Vuex 页面刷新时会失效，因为 Vuex 是存在内存中，当页面（F5）刷新时属于清除内存，Vuex 存储的值会丢失。因此需要重新拉取解决这一问题

3、应用场景：

Vuex 用于组件之间的传值；

localStorage ，sessionStorage 则主要用于不同页面之间的传值。

有人觉得 localstorage 可以代替 Vuex，对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localstorage，sessionstorage 是无法做到，

因此vuex 与 storage 配合使用才能达到最好的效果，知识整理中

封装

/**
 * @description storage 封装
 */
const STORAGE_KEY = 'xiao'
 
// storage.setItem('a', 1)
// storage.setItem('xiao', 100, 'user')
// storage.setItem('user', { a: 1 })  value={a:1}
// storage.setItem('abc', { a: 1 }, 'user')
 
export default {
  //  JSON.stringify方法将 JavaScript 对象转换为字符串。
  setItem (key, value, moduleName) {
    if (moduleName) {
      const val = this.getItem(moduleName)
      val[key] = value
      this.setItem(moduleName, val)
    } else {
      const val = this.getStorage()
      // 添加一个字段
      val[key] = value
      window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
    }
  },
  // 获取摸一个模块下面的属性user下面的userName
  getItem (key, moduleName) {
    // 如果只有一个参数直接return {"user":{"a":1,"abc":{"a":1}},"a":1} key=user
    if (moduleName) {
      const val = this.getItem(moduleName)
      console.log(val, moduleName)
      if (val) return val[key]
    }
//JSON.parse(sessionStorage.getItem('xiao'))['user'] 浏览器输入
//{"user":{"a":1,"abc":{"a":1}},"a":1}  提前写入浏览器的值
    return this.getStorage()[key]
  },
  getStorage () {
    // 方法用来解析JSON字符串
    return JSON.parse(window.sessionStorage.getItem(STORAGE_KEY) || '{}')
  },
  clear (key, moduleName) {
    const val = this.getStorage()
    if (moduleName) {
      delete val[moduleName][key]
    } else {
      delete val[key]
    }
    window.sessionStorage.setItem(STORAGE_KEY, JSON.stringify(val))
  }
}