Почему я получаю значения хранилища vuex по умолчанию, а не обновленные значения для моего вычисляемого свойства? - PullRequest
0 голосов
/ 19 мая 2019

У меня есть 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, я вижу из devtools Vue, что мои переменные хранилищаправильно обновлены:

vuex store

Проблема возникает, когда я возвращаюсь на страницу /initial. Я ожидаючто когда пользователь вернется к этому представлению, значение computed isLoggedIn вернет true;но вместо этого я получаю значение хранилища по умолчанию (false).

Почему mapState не возвращает true для переменной хранилища isLoggedIn ?

Также - хотя я не уверен, что это связано - я заметил, что в этом сценарии vue devtools снова показывает первый Base state прикрепленного снимка экрана в качестве активного (с той же отметкой времени).Это как если бы действие возврата вернулось к исходному состоянию вместо создания нового.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...