javascript - 如何在不刷新页面的情况下使用 Vue 切换按钮

Question

我正在尝试根据用户是否登录来切换登录和退出按钮。我可以有效地使用 v-if，但我必须刷新页面才能看到切换发生。也就是说，当您注销时，您必须重新加载页面才能将“注销”按钮更改为“登录”按钮。

模板:

      <div v-if="signedIn">
        <v-btn  class="ml-4 mr-4 primary" @click="logout">
          <span>Sign Out</span>
          <v-icon>mdi-logout</v-icon>
        </v-btn>
      </div>
      <div v-else>
        <v-btn class="ml-4 mr-4 primary" @click="$router.push('/login')">
          <span>Sign In</span>
          <v-icon>mdi-login</v-icon>
        </v-btn>
      </div>

JavaScript:

     data() {
       return {
         drawer: true,
         signedIn: this.$store.getters.isLoggedIn || false,
       };
     },

Vue 在不使用页面刷新的情况下处理切换的方式是什么？我确信有更好的方法，只是 Vue 的新手和我发现的大多数教程都无济于事。任何提示、意见或建议表示赞赏!

---

编辑

商店:

    import Vue from 'vue';
    import Vuex from 'vuex';
    import axios from 'axios';

    Vue.use(Vuex);

    export default new Vuex.Store({
      state: {
        status: '',
        token: localStorage.getItem('token') || '',
        user: {},
      },
      mutations: {
        auth_request(state) {
          state.status = 'loading';
        },
        auth_success(state, token, user) {
          state.status = 'success';
          state.token = token;
          state.user = user;
        },
        auth_error(state) {
          state.status = 'error';
        },
        logout(state) {
          state.status = '';
          state.token = '';
        },
      },
      actions: {
        login({ commit }, user) {
          return new Promise((resolve, reject) => {
            commit('auth_request');
            axios({ url: 'http://localhost:5000/api/v1/login', data: user, method: 'POST' })
              .then((resp) => {
                const { token } = resp.data;
                // eslint-disable-next-line no-shadow
                const { user } = resp.data;
                localStorage.setItem('token', token);
                axios.defaults.headers.common.Authorization = token;
                commit('auth_success', token, user);
                resolve(resp);
              })
              .catch((err) => {
                console.log('err:', err.response);
                commit('auth_error');
                localStorage.removeItem('token');
                reject(err);
              });
          });
        },
        logout({ commit }) {
          return new Promise((resolve) => {
            commit('logout');
            localStorage.removeItem('token');
            delete axios.defaults.headers.common.Authorization;
            resolve();
          });
        },
      },
      getters: {
        isLoggedIn: state => !!state.token,
        authStatus: state => state.status,
      },
    });

Answer 1

数据属性 signedIn 对 this.$store.getters.isLoggedIn 没有反应。

尝试使用返回 this.$store.getters.isLoggedIn 的计算方法代替:

computed: {
    signedIn() {
        return this.$store.getters.isLoggedIn;
    }
}