CODEWITHSUNDEEP
vue.jsvuexpersistent-storage
user119313
user119313

Reputation: 11

'vuex-persistedstate' won´t call actions and reload page

need some help.

Added vuex-persistedstate to proyect and it seems as it wont let me call my actions on store. When I hit a dispatch trying to logout, page reloads, localStorage keeps the same info it got on login and entire Vuex Panel on VueDev tools resets.

This is my code.

store.js

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

Vue.use(Vuex)

export default new Vuex.Store({
  strict: true,
  plugins: [
    createPersistedState()
  ],
  state: {
    token: null,
    user: null
  },
  mutations: {
    setToken (state, token) {
      console.log('mutation1')
      state.token = token
    },
    setUser (state, userData) {
      console.log('mutation2')
      state.user = userData.username
      state.cargo = userData.cargo
    }
  },
  actions: {
    setToken ({commit}, token) {
      console.log('action1')
      commit('setToken', token)
    },
    setUser ({commit}, userData) {
      console.log('action1')
      commit('setUser', userData)
    }
  }
})

Login method on login component

async login () {
  try {
    const response = await AuthenticationService.ingresar({
      username: this.username,
      password: this.password
    })
    const { username, cargo, token } = response.data
    this.$store.dispatch('setToken', token)
    this.$store.dispatch('setUser', { username, cargo })
  } catch (error) {
    this.error = error.response.data.error
  }
}

LogOut method on navbar component

logout () {
  this.$store.dispatch('setToken', null)
  this.$store.dispatch('setUser', null)
  this.$router.push('/')
}

Everything works if I disable vuex-persistedstate.

Upvotes: 0

Views: 451

Answers (1)

user119313
user119313

Reputation: 11

Sorry, my bad. Got an href=" " on link calling the logout function. This was reloading the page and not calling the function. Therefore doing nothing with the state. Took me centuries to find it. Nevermind. :)

Upvotes: 1

Related Questions