javascript - 为什么我得到默认的 vuex 存储值而不是计算属性的更新值？

Question

我有一个initial（起始）页面，用户可以在其中按下按钮登录。另外，在该页面中，我想知道用户是否已经登录，因此我正在使用mapState它来访问isLoggedIn我商店的状态变量。

在代码中：

 // Initial.vue

 <template>
    <v-container
        app
        fluid
    >
        <v-parallax
            src="https://cdn.vuetifyjs.com/images/backgrounds/vbanner.jpg"
            height="1000"
        >
            <v-layout
                row
                wrap
            >
                <!-- LOGIN-->

                    <v-toolbar
                        flat
                        light
                        dense
                        color="transparent"
                    >
                        <v-spacer></v-spacer>
                        <v-toolbar-items>
                            <v-btn
                                medium
                                color="lime lighten-2"
                                @click="login"
                                class="font-weight-bold title text-uppercase"
                            >
                                LOGIN
                            </v-btn>
                        </v-toolbar-items>
                    </v-toolbar>
            <v-layout
                align-center
                column
            >
                <h1 class="display-2 font-weight-thin mb-3 text-uppercase lime--text lighten-2" >My page</h1>
                <h4 class="subheading">{{isLoggedIn}}</h4>
            </v-layout>

            </v-layout>
        </v-parallax>
    </v-container>
</template>
    <script>
        import VContainer from "vuetify/lib/components/VGrid/VContainer";
        import VLayout from "vuetify/lib/components/VGrid/VLayout";
        import VBtn from "vuetify/lib/components/VBtn/VBtn";
        import VToolbar from "vuetify/lib/components/VToolbar/VToolbar";
        import VParallax from "vuetify/lib/components/VParallax/VParallax";

        import { mapState } from 'vuex';

        export default {
            name: "Initial",
            components: {
                VContainer,
                VLayout,
                VBtn,
                VToolbar,
                VParallax
            },
            //Upon returning to this page isLoggedIn is false eventhough isLoggedIn has been updated to store
            computed: mapState({
                    isLoggedIn: state => state.isLoggedIn
                }), 
            methods: {
                login() {
                    this.$auth.login();
            },
            }


        }
    </script>

    <style scoped>

    </style>

用户登录后（通过auth0），他会被重定向到注册表单。表单提交后，数据被发送到后端，我正在调用一个REGISTER操作来更新存储状态，然后重定向到/home. 这样做的代码是：

 //CompleteSignup.vue

    this.$store.dispatch(REGISTER,registerFormData)
              .then(() => this.$router.push('/home'));

我的商店是这样的：

//index.js

import Vue from 'vue';
import Vuex from 'vuex';
import {APIService} from '@/common/api.service';

import {REGISTER} from "./actions.type";
import {SET_ERROR, SET_AUTH} from "./mutations.type";

Vue.use(Vuex);

export default new Vuex.Store({
  strict: process.env.NODE_ENV !== 'production',

  state: {
    errors: null,
    user: {},
    isLoggedIn: false

  },

  getters: {
    currentUser(state) {
      return state.user;
    },
  },

  actions: {
    [REGISTER]({commit}, registerData) {
      return new Promise((resolve, reject) => {
          APIService.create(registerData)
            .then(({data}) => {
              commit(SET_AUTH, data);
              resolve(data);
            })
            .catch(({response}) => {
                commit(SET_ERROR, response.data.errors);
                reject(response);
            });
      });
    }
  },

  mutations: {
    [SET_ERROR](state, error) {
      state.error = error;
    },
    [SET_AUTH](state, user) {
      state.isLoggedIn = true;
      state.user = user.user_id;
      state.errors = {};
    }

  }

})

当我在里面时，/home我可以从 Vue devtools 中看到我的商店变量已正确更新：

当我导航回/initial页面时出现问题。我希望当用户返回该视图时，该computed值isLoggedIn将返回true；但相反，我得到了默认的存储值（false）。

为什么不mapState返回store 变量trueisLoggedIn？

另外-尽管我不确定它是否相关-我注意到在这种情况下，vue devtools再次Base state将附加屏幕截图的第一个显示为活动屏幕截图（也具有相同的时间戳）。就好像返回动作重新触发了原始状态，而不是创建一个新状态。

标签： javascriptvue.jsvuex