I'm currently working on a Vue.js SPA that utilizes Rails 6 API as the backend and Vue-cli (legacy webpack template).
After signing in a user, everything seems to be functioning correctly. I can view the user details, it updates my setCurrentUser mutation and state. However, when I navigate away from the dashboard, I lose all the user's state. The Vue dev tools panel indicates that everything resets back to false.
As I am new to Vue/Vuex, I suspect this might be an oversight on my part.
Here is my signin method for fetching 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 displays the successful completion of the API call to sign in and the return of the user object: https://i.stack.imgur.com/Oab9W.png
Similarly, this image shows the Vue Panel setting the currentUser state with the user object: https://i.stack.imgur.com/FKP93.png
However, upon performing a page refresh or moving away from the dashboard, all data stored in the state gets lost.
https://i.stack.imgur.com/YJFwO.png
Given my limited experience with Vuex, I have attempted to utilize Vue.set and $set on my mutations in store.js, but this did not resolve the issue. Any suggestions or assistance would be greatly appreciated!
Below 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({
})
]
})