Vuex 在页面刷新时没有保持 currentUser 状态

Question

所以我正在使用 Rails 6 api 作为后端和 Vue-cli（旧版 webpack 模板）构建一个 Vue.js SPA

当我登录用户时，一切正常，我可以看到用户的详细信息，它设置了我的 setCurrentUser 突变和状态，只要我点击离开仪表板，我就会失去所有用户的状态。 vue 开发工具面板本质上显示所有内容都重置为 false。

我对 Vue / Vuex 比较陌生，所以这可能是我的疏忽。

我获取当前用户的登录方法：

 methods: {
    signin () {
      let formData = new FormData()
      formData.append('user[email]', this.user.email)
      formData.append('user[password]', this.user.password)

      this.$http.plain.post('/signin', formData, { emulateJSON: true })
        .then(response => this.signinSuccessful(response))
        .catch(error => this.signinFailed(error))
    },
    signinSuccessful (response) {
      if (!response.data.csrf) {
        this.signinFailed(response)
        return
      }
      this.$http.plain.get('/api/v1/me')
        .then(meResponse => {
          this.$store.commit('setCurrentUser', { currentUser: meResponse.data, csrf: response.data.csrf })
          this.error = ''
          this.$router.replace('/dashboard')
          this.flashMessage.show({
            status: 'info',
            title: 'Signed In',
            message: 'Signin successful, welcome back!'
          })
        })
        .catch(error => this.signinFailed(error))
    },
    signinFailed (error) {
      this.user.error = (error.response && error.response.data && error.response.data.error)
      this.$store.commit('unsetCurrentUser')
    },
    checkSignedIn () {
      if (this.$store.state.signedIn) {
        this.$router.replace('/dashboard')
      }
    }
  }

此图像显示对登录的 api 调用完成并返回用户对象。

此图显示 Vue 面板设置 currentUser 状态并具有用户对象

现在，当我去刷新页面或离开仪表板时，我会丢失所有处于状态的东西。

就像我说的我是 Vuex 的新手，我尝试在 store.js 中的突变上使用 Vue.set 和 $set 但这也没有解决问题..？

这是我的 store.js 文件：

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'

Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    currentUser: {},
    signedIn: false,
    csrf: null
  },
  mutations: {
    setCurrentUser (state, { currentUser, csrf }) {
      state.currentUser = currentUser
      state.signedIn = true
      state.csrf = csrf
    },
    unsetCurrentUser (state) {
      state.currentUser = {}
      state.signedIn = false
      state.csrf = null
    },
    refresh (state, csrf) {
      state.signedIn = true
      state.csrf = csrf
    }
  },
  getters: {
    isOwner (state) {
      return state.currentUser && state.currentUser.role === 'owner'
    },
    isManager (state) {
      return state.currentUser && state.currentUser.role === 'manager'
    },
    isAdmin (state) {
      return state.currentUser && state.currentUser.role === 'admin'
    },
    isUser (state) {
      return state.currentUser && state.currentUser.role === 'user'
    },
    isSignedIn (state) {
      return state.signedIn === true
    }
  },
  plugins: [
    createPersistedState({

    })
  ]
})

我们将不胜感激任何帮助！

Answer 1

添加插件：[createPersistedState()]，创建商店实例时

export default new Vuex.Store({
          plugins: [createPersistedState()],}