简单解决vuex中刷新值不在的问题

最近小用了一下vuex来进行状态管理。

需求

login之后，得到当前用户的id，然后再其他页面拿着这个id去进行其他请求

我的做法

在我的store里面是这样写的：

import * as types from '../mutation-types'
const state = {
  userId: ‘‘’’
}
const getters = {
  userId: state => state.userId
}
const mutations = {
  [types.SET_USER_ID] (state, id) {
    state.userId = id
  }
}
const actions = {
  setUserId: ({commit}, id) => commit(types.SET_USER_ID, id)
}
export default {
  state,
  getters,
  actions,
  mutations
}

mutaion-type.js里面

// login
export const SET_USER_ID = 'SET_USER_ID'

在页面上
html

<div class="item pointer" @click="toNew(userId)">
        <img class="icon-item" src="/static/image/setting.svg">アカウント設定
      </div>

js

methods: {
      toNew (id) {
        this.$router.push({name: 'UserDetail', query: {userId: id}}) // 我需要跳转的页面
      }},
 computed: {
      ...mapGetters({
        userId: 'userId'
      })}

这时候有个问题了，id是取到，但是呢，我一刷新页面，数据就完全丢了。
google 了一下才发现我对vuex有点误解，以为它可以跨页面存储数据。
其实vuex解决的是跨组建的数据存储和共用问题，不是跨页面
这个是重点！！
所以如果要解决这个跨组建又跨页面的传递数据的话，需要借助外部储存，如localStorage或者sessionStorage来储存。根据自己的需求选择啦。
其实很简单，在取到id的时候，把id先存到内存里，然后id的初始值从存储里面取。
代码如下：

const state = {
  userId: window.localStorage.getItem('userId') //这里写初始值
}
const getters = {
  userId: state => state.userId
}
const mutations = {
  [types.SET_USER_ID] (state, id) {
    state.userId = id
    window.localStorage.setItem('userId', id) // 在mutation里面取数据的时候就先去set一次
  }
}

就是这么的简单。只加了2行代码。