'vuex-persistedstate' 不会调用操作并重新加载页面答案

【问题标题】：'vuex-persistedstate' won´t call actions and reload page'vuex-persistedstate' 不会调用操作并重新加载页面
【发布时间】：2023-03-31 08:38:01
【问题描述】：

需要帮助。

为 proyect 添加了 vuex-persistedstate，它似乎不会让我在商店中调用我的操作。当我遇到一个试图注销的调度时，页面重新加载，localStorage 会保留它在登录时获得的相同信息，并且 VueDev 工具上的整个 Vuex 面板会重置。

这是我的代码。

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

登录组件上的登录方法

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方法

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

如果我禁用 vuex-persistedstate，一切正常。

【问题讨论】：

标签： vue.js vuex persistent-storage

【解决方案1】：

对不起，我的错。在调用注销功能的链接上获得 href=" "。这是重新加载页面而不是调用该函数。因此，对国家无所作为。我花了几个世纪才找到它。没关系。 :)

【讨论】：