页面重定向后未保留 Vuex 状态

Posted 2023-02-22

【中文标题】页面重定向后未保留 Vuex 状态

【英文标题】：Vuex state not preserved after page redirect

【发布时间】：2018-03-08 13:07:36

【问题描述】：

在 Vue.js 中，我有这种方法来登录用户，设置值 int vuex 存储，然后重定向到主页：

   login: function () 
            axios.post( this.BASE_URL + "/login", 
            username: this.username,
            password: this.password,
          ).then( (res) =>  
                this.$store.commit('setIsAuthenticated', true);
                this.$store.commit('setToken', res.data.token);
                this.$store.commit('setPhoto', res.data.photo);
                this.$store.commit('setUsername', res.data.username);
                window.location.href = '/home'; //<-The problem     
          

突变示例：

setToken: function (state, token) 
    state.token = token;
    ,
setUsername: function (state, username) 
    state.username = username;
,

在App.vue（根组件），我只是从存储中获取值作为计算值：

  computed: 
    isAuthenticated () 
    return this.$store.state.isAuthenticated;
    ,

    token () 
        return this.$store.state.token; 
     ,

当我注释掉 window.location.href = '/home'; 时，我在 Vue.js 控制台中看到登录成功并且在商店中设置了值，但是一旦页面被重定向到 /home，所有商店值都会被清空。 我想知道为什么会发生这种情况以及如何解决？

更新： 我在 routes.js 中使用 vue-router，如下所示：

import webLogin from './components/webLogin.vue';
import showAll from './components/showAll.vue';

export default [ 
  path:'/', component: showAll ,
  path:'/add', component: addJoke    ,
  path: '/login', component: webLogin,  
]

【问题讨论】：

你使用Vue路由器吗？

是的，我确实使用 vue 路由器。

window.location.href 加载一个全新的页面。如果您需要数据在页面请求中可用，则需要将其保存在某个地方。我现在会选择localStorage

试试github.com/robinvdvleuten/vuex-persistedstate 或github.com/crossjs/vuex-localstorage

这个答案可能会有所帮助：***.com/questions/43027499/vuex-state-on-page-refresh/…

【参考方案1】：

使用 Vuejs 在页面之间导航，不要手动操作

除非您使用 Vuejs 路由从一个页面导航到另一个页面，否则不会保留状态。考虑这两种情况

从一页设置商店中的状态后。您直接在浏览器窗口中输入另一个页面的 URL，然后按 Enter。检查商店中的状态。它不会被保留，并将被重置为默认值。 从一页设置商店中的状态后。您使用 Vuejs 路由导航到另一个页面

在 Nuxtjs 中

<nuxt-link to="discussion/1">Go to Discussion</nuxt-link>

在 Vuejs 中

<router-link to="discussion/1">Go to Discussion</router-link>

检查商店中的状态。它会保存在商店里。

【参考方案2】：

Vuex 状态保存在内存中。如果您使用window.location.href 重定向，这将触发整个页面加载，这将清除您当前的状态。您必须使用 Vue 路由器进行导航https://router.vuejs.org/en/

例如，如果您的路线名称是 Home，您可以像这样重定向：

this.$router.push( name: 'Home' );

【讨论】：

能否详细说明如何在我的代码上下文中使用 vue 路由器进行重定向？

我编辑了我的答案，但不确定您是如何设置路线的。

我添加了this.$router.push( path: '/home' );，现在它就像一个魅力。谢谢！