Javascript Vuex在页面刷新时未保持当前用户状态

因此，我正在构建一个Vue.js SPA，使用Rails 6 api作为后端，并使用Vue cli（遗留网页包模板）

当我登录一个用户时，一切正常，我可以看到用户的详细信息，它设置了我的setCurrentUser和状态，只要我从仪表板上单击，我就失去了所有用户的状态。vue dev工具面板实质上显示了所有重置为false的内容

我是Vue/Vuex的新手，因此这可能是我的疏忽

获取当前用户的My signin方法：

 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')
      }
    }
  }

此图显示了对signin的api调用完成并返回用户对象。

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

现在，当我去刷新页面或离开我的仪表板时，我失去了状态中的所有内容

就像我说的，我是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({

    })
  ]
})

---

我们将非常感谢您的帮助

在创建存储实例时添加插件：[createPersistedState（）]

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

---

@M.Gara我应该在问题中列出，我尝试使用它，但无法使其工作，没有记录错误，但没有创建Cookie。您不应该进行刷新。因为刷新将清除Vue实例并创建一个新实例。如果要在刷新后仍保留数据，应使用浏览器

本地存储

。仅供参考，将

$router.替换为
$router.推送
，以便更新浏览器历史记录。他正在使用
vuex persistedstate
->他正在使用localStorage检查您的浏览器开发工具-localStorage。页面重新加载后是否有数据？