Question

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

   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},  
]

Answer 1

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

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

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

Answer 2

使用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>

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

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

2 个答案: