Javascript 为什么登录后没有重新渲染？

用户登录时，工具栏项（使用Vuetify创建）不会更改。我正在使用Vuex设置并获取检查用户是否登录所需的令牌。令牌存储在localStorage中（为了简单起见）

我正在使用computed属性检查工具栏组件中是否存在令牌。但是我不知道如何将工具栏项目更改为使用

v-if

指定的项目

当用户登录时，工具栏项目保持不变（我认为这是因为Vue会尽可能地提高效率，并且不会再次呈现工具栏）。但我怎样才能克服这个问题呢

工具栏组件：

<template>
  <v-toolbar-items v-if="userLoginStatus">
    <v-btn text :to="'/'" v-on:click="logout" v-on:click.prevent>
      <v-icon left>fas fa-sign-out-alt</v-icon>Sign out
    </v-btn>
  </v-toolbar-items>
  <v-toolbar-items v-else>
    <v-btn text v-else :to="'/login'" v-on:click.prevent :width="123">Login</v-btn>
    <v-btn text v-else :to="'/register'" v-on:click.prevent :width="123">Register</v-btn>
  </v-toolbar-items>
</template>

<script>
export default {
  name: 'Toolbar',
  computed: {
    userLoginStatus() {
      return this.$store.getters['user/isLoggedIn']
    },
  },
  methods: {
    logout() {
      let conf = confirm('Sure you want to logout?')
      if (conf === true) {
        this.$store.commit('user/logout')
      }
    },
  },
}
</script>

<template>
  <v-container fill-height>
    <v-card>
      <v-card-text>
        <v-form ref="form">
          <v-text-field v-model="email" label="E-mail" required></v-text-field>
          <v-text-field label="Password" v-model="password" required></v-text-field>
        </v-form>
      </v-card-text>
      <v-card-actions>
        <v-spacer></v-spacer>
        <v-btn depressed color="primary" @click="login">Log in</v-btn>
      </v-card-actions>
    </v-card>
  </v-container>
</template>

<script>
export default {
  name: 'Login',
  data: () => {
    return {
      password: '',
      email: '',
    }
  },
  methods: {
    login() {
      this.$axios({
        method: 'post',
        url: '/login',
        headers: {
          'Content-Type': 'application/json',
        },
        data: {
          email: this.email,
          password: this.password,
        },
      })
        .then(response => {
          if (response.status === 200) {
            this.$store.commit('user/credentialsSetter', {
              username: resp.data.username,
              loggedIn: true,
              email: this.email,
              token: resp.data.token,
            })

            this.$router.push('/')
          }
        })
        .catch(error => {
          if (error.response) {
            console.log(error.response.data)
            console.log(error.response.status)
            console.log(error.response.headers)
          }
        })
    },
  },
}
</script>

编辑2:

好的，我通过手动设置状态来解决这个问题

export default {
    namespaced: true,
    state: {
     .../
     loggedIn: localStorage.getItem('loggedIn') || false,
     .../
    },
    mutations: {
      .../
      credentialsSetter: (state, payload) => {
         localStorage.setItem('loggedIn', payload.loggedIn);
         state.loggedIn = payload.loggedIn
      },
      logout: (state) => {
            localStorage.clear();
            state.loggedIn = false;
      }
      .../
    },
    getters: {
        isLoggedIn(state) {
            return state.loggedIn;
        }
    }
}

---

但是有没有更好的方法来执行此操作，而不是我手动设置值以使状态成为反应状态？

将

userLoginStatus（）

computed属性移动到

methods

对象中，将其更改为method。@MohsinMehmood不起作用。

this.$store.getters的实现是什么['user/getToken']；

？您可能无法获得预期的结果，因为您计算此getter的方式不包括反应数据。如果您的实现类似于：

返回localStorage.getItem（'crtUser'））.token

，它不应该工作，因为vue没有查看

localStorage

的更改。您可以提供您的存储吗？将

userLoginStatus（）

computed属性移动到

methods

对象中，以将其更改为方法。@MohsinMehmood这不工作。$store.getters['user/getToken']；？您可能无法获得预期的结果，因为您计算此getter的方式不包括反应数据。如果您的实现类似于：

返回localStorage.getItem（'crtUser'）。token

，它不应该工作，因为vue没有监视

localStorage

的更改。您能提供您的存储吗？

export default {
    namespaced: true,
    state: {
     .../
     loggedIn: localStorage.getItem('loggedIn') || false,
     .../
    },
    mutations: {
      .../
      credentialsSetter: (state, payload) => {
         localStorage.setItem('loggedIn', payload.loggedIn);
         state.loggedIn = payload.loggedIn
      },
      logout: (state) => {
            localStorage.clear();
            state.loggedIn = false;
      }
      .../
    },
    getters: {
        isLoggedIn(state) {
            return state.loggedIn;
        }
    }
}