Vuex not keeping currentUser state on page refresh

Question

So I am Building a Vue.js SPA using Rails 6 api as the backend and Vue-cli (legacy webpack template)

When I sign a user in, everything works fine, I can see the users details, it sets my setCurrentUser mutation and state, as soon as I click away from my dashboard, I loose all my user's state. the vue dev tool panel essentially shows everything reset back to false.

I am rather new to Vue / Vuex so this may be an oversight on my part.

My signin method to grab the current user:

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

This image shows the api call to signin completes and returns the user object.

This image shows the Vue Panel sets the currentUser state and has the user object

Now when I go to do a page refresh or move away from my dashboard, I loose everything that was in state.

So like I said I'm brand new to Vuex, I have tried to use Vue.set and $set on my mutations in store.js but this did not remedy the problem either..?

Here is my store.js file:

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({

    })
  ]
})

Any assistance here would be greatly appreciated!

@M.Gara i should have listed that in the question, I have tried to use that, but could not get it working, no errors logged but was not creating the cookie — Shawn Wilson
You should not do a refresh. Because refresh will clear the Vue instance and create a new one. If you want to persist the data even after a refresh, you should use browser local storage. And FYI, replace $router.replace with $router.push so that the browser history gets updated. — Kalesh Kaladharan
He is using vuex-persistedstate -> he is using localStorage Check your browser Dev Tools - localStorage. Are there data after page reload ? — Michal Levý

wanje wanje · Accepted Answer · 2019-11-16T11:04:52

Add plugins: [createPersistedState()], when creating store instance

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

Vuex not keeping currentUser state on page refresh

1 Answers