Vuex状態は、値がint型vuexストアを設定し、私は、ユーザーがログインするには、このメソッドを持っているVue.jsで

Question

をリダイレクトして、ホーム・ページにリダイレクト：

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にリダイレクトされるとすぐに、すべてのストア値が空になります。 なぜこれが起こり、どうやって解決するのだろうか？

UPDATE： 私はこのようroutes.jsでVUE-ルータを使用しています：

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でリダイレクトすると、ページ全体が読み込まれ、現在の状態がパージされます。あなたのルート名がある場合たとえば、あなたのナビゲーションhttps://router.vuejs.org/en/

を行うためにVueのルータを使用する必要がHomeあなたは次のようにリダイレクトすることができます。

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