Im trying to store the user logged on my application. Im using a store.js file to use vuex and save my variables.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'


Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    userloged: ''
  }
})

I declared the store variable on my main.js and I used in this way, when I save the name of the user in my login ponent I use,

        this.$store.state.userloged = this.username;

And when Im going to used in the others ponents I got it in this way,

 puted:{
    userloged() {
        return this.$store.state.userloged;
    }
},

But if I refresh the page I lost the information. What can I do?

Im trying to store the user logged on my application. Im using a store.js file to use vuex and save my variables.

import Vue from 'vue'
import Vuex from 'vuex'
import createPersistedState from 'vuex-persistedstate'
import Cookies from 'js-cookie'


Vue.use(Vuex)

export const store = new Vuex.Store({
  state: {
    userloged: ''
  }
})

I declared the store variable on my main.js and I used in this way, when I save the name of the user in my login ponent I use,

        this.$store.state.userloged = this.username;

And when Im going to used in the others ponents I got it in this way,

 puted:{
    userloged() {
        return this.$store.state.userloged;
    }
},

But if I refresh the page I lost the information. What can I do?

• javascript
• vue.js
• vuex

• I added an example on my answer – ricardoorellana Commented May 15, 2018 at 19:24

3 Answers 3

You should use 'vuex-persistedstate' to persist Vuex state with localStorage.

You should update the state through mutations and dispatching an action, redifine your vuex instance to contain the following objects:

import createPersistedState from 'vuex-persistedstate';

const store = new Vuex.Store({
  state: {
    userlogged: ''
  },
  mutations: {
    saveUserLogged (state, loggedUser) {
      state.userLogged = loggedUser
    }
  },
  actions: {
    saveUserLogged (context, loggedUser) {
      context.mit('saveUserLogged', loggedUser)
    }
  },
  plugins: [createPersistedState()]
})

So to save the loggedUser you should dispatch an action:

this.$store.dispatch('saveUserLogged', this.username);

You can learn more about mutations and actions in the Vuex official site

Please take a look to this example https://codesandbox.io/s/0yy7vk29kv

Vuex doesn't persist the state over page reloads.

You have to use something like Vuex-persistedstate plugin.

import createPersistedState from 'vuex-persistedstate'

const store = new Vuex.Store({
  // ...
  plugins: [createPersistedState()]
})

Docs and instalation instructions: https://www.npmjs./package/vuex-persistedstate

You can simply use the cookies with https://www.npmjs./package/vue-cookies