vue.js框架用户信息储存在哪里？

在我们***项目中，使用了Vue前端框架，由于某些页面（比如最近的秋季抽奖主题以及玩家社区评论页面和点赞页面）需要用户登录才能进行签到、抽奖、评论和点赞等功能。【相关推荐：vue.js视频教程】

一般像这样的用户信息一般都是存在Vuex里面，因为Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

但是Vuex虽然能存储状态，但是一旦页面刷新，用户状态也随之刷新消失，如果想要用户状态不会因为刷新而消失，这里便要用到本地存储（localstorage、sessionstorage）了。

vuex存储在内存，localstorage（本地存储）则以文件的方式存储在本地,永久保存（不主动删除，则一直存在）；sessionstorage( 会话存储 ) ，临时保存。localStorage和sessionStorage只能存储字符串类型，对于复杂的对象可以使用ECMAScript提供的JSON对象的stringify和parse来处理

使用vuex+localStorage存储用户信息

1、首先需要装vuex

npm install vuex -d

2、新建store文件夹，新建index.js，并引入vue、vuex,代码如下：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
const key = 'user'
const store = new Vuex.Store({
  state () {
    return {
      user: null
    }
  },
  getters: {
    getStorage: function (state) {
      if (!state.user) {
        state.user = JSON.parse(localStorage.getItem(key))
      }
      return state.user
    }
  },
  mutations: {
    $_setStorage (state, value) {
      state.user = value
      localStorage.setItem(key, JSON.stringify(value))
    },
    $_removeStorage (state) {
      state.user = null
      localStorage.removeItem(key)
    }
  }
})

export default store

3、在main.js中引入store,

import store from './store/index'

new Vue({
  el: '#app',
  router,
  store,  // 引入store
  components: { App },
  template: '<App/>'
})

4、在登录组件中，如代码所示：

this.$message({
   message: '登录成功',
   type: 'success'
})
this.$store.commit('$_setStorage', {user: this.loginForm.username})
this.$router.push({name: 'Home'})

5、储存其他状态类信息，方式相同。

使用session Storage和vuex保存用户登录状态（用户登录信息）

首先，vuex安装完成之后，构建如下目录：

这样做的目的是降低代码的耦合度，方便以后的修改与维护。

然后，vuex中几个文件详情如下：

2.webp.jpg
store.js

在store.js中目前保存三个数据，一个是当前用户，一个是判断当前用户是否已经登录，最后一个是保存用户登录后持有的token。实际上token也可以不保存在vuex中，因为vuex是一个状态管理器而非一个存储工具。我在axios的headers里是直接用的sessionStorage里的token。

3.webp.jpg
getters.js

4.webp.jpg
mutations.js

5.webp.jpg
actions.js

接下来，在用户登录的时候，我们就需要将用户名和token存放入sessionStorge，再由sessionStorage传入vuex中。

6.webp.jpg

如上图，在登录成功之后，执行红框中的两个操作，就实现了上述的功能。vuex的dispatch和commit方法是有区别的，这个区别下一篇我们再详细讲。sessionStorage的setItem和getItem是一对，语义上就可以理解用法，不多说。将用户名放入vuex，调用setUser即执行actions.js中的方法来改变状态，则进入mutations.js中的userStatus方法，最终实现改变store.js中的三个状态。

那么其实到这里，已经实现了将用户的状态，即用户名和token放入sessionStorage中的要求了。

下一个问题是，在刷新页面的时候，如何获取这个状态呢？