问题引出

使用vue开发时，经常会用到vuex来管理应用的所有组件的状态

可很蛋疼的一点是：vuex在页面刷新的时候存储的值会丢失

对于组件间共用同一数据又想保存住信息或者再页面刷新的时候不丢失数据

哪怕是你的应用坚持不刷新，也是会需要长时间保存应用数据的时候，像是用户登录，如果要使得用户登录了后，下一次访问应用的时候无需登录。

解决方案

然而我们找到了storage

storage又有sessionStorage、localStorage…

  • sessionStorage 是HTML5新增的一个会话存储对象
  • localStorage对象是HTML5的客户端存储持久化数据的方案

两者的功能区别是：localstorage永久存储，不过期，除非手动删除；sessionstorage在重启浏览器、关闭页面或新开页面时失效。

所以根据我们的需求，我们更多的选用localStorage

采用vuex搭配localStorage的方式。

在vuex用上localStorage非常简单，有些网友写上一大堆代码，可实际上有些却比并无用处，当然也排除应用程序非常复杂的情况。

在你的store文件中（根据你自己的应用文件命名而定）

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
  ...
  
state: JSON.parse(localStorage.getItem('user')) || {},

mutations: {
  // 登录/更新
  SET_USER: (state, user) => {
    localStorage.setItem('user', JSON.stringify(user))
    Object.assign(state, user)
  },
  SET_AVATAR: (state, avatar) => {
    state.Avatar = avatar
    // localStorage.removeItem('user')
    localStorage.setItem('user', JSON.stringify(state))
  },
  // 登出
  OUT_USER(state) {
    localStorage.removeItem('user')
    Object.keys(state).forEach(k => Vue.delete(state, k))
  }
}
actions: {
  login({commit}, user) {
    commit("SET_USER", user)
  },
  logout({commit}) {
    commit("OUT_USER")
  }
}
  
  ...

该代码是我写用户登录、修改、登出功能的情况，虽然有些代码并无完整，但重点是vuex与localStorage的搭配

state: JSON.parse(localStorage.getItem(‘user’)) || {}

一行代码即可让vuex和localStorage连接上关系

后面的mutations和actions为数据的更新操作。可根据自己的实际情况而定。

提问

有些人可能会想，为啥不直接用localstorage可以代替vuex

事实上对于不变的数据确实可以，但是当两个组件共用一个数据源（对象或数组）时，如果其中一个组件改变了该数据源，希望另一个组件响应该变化时，localStorage无法做到,因为：

vuex存储在内存，localstorage则以文件的方式存储在本地

localStorage.getItem(‘user’)中user（或其他）的命名是否会与其他应用网站等冲突

有该顾虑是对的，毕竟localStorage是保存在本地的，而访问了多个使用了localStorage的应用网站之后，本地应当会有很多个localStorage对象，我们怎么又能保证我们拿到是是不是我们原来的那个呢

而这个顾虑却又是多余的，仔细了解localStorage之后，我们会发现：

为了能访问到同一个localStorage对象，页面必须来自同一个域名（子域名无效），使用同一种协议，在同一个端口上。

localStorage的功能远不止此，有兴趣可以用localStorage来实现更加有意思的功能