Question

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

我正在使用计算属性检查工具栏组件中是否存在令牌。但是我不知道如何将工具栏项更改为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>

编辑：

我将getToken的命名更改为isLoggedIn，所以现在它是.getters ['user / isLoggedIn']。我还更改了登录名axios帖子的.then（）部分。

用户商店：

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

编辑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;
        }
    }
}

BUT 是否有更好的方法来代替我手动设置值以使状态为被动状态？

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

0 个答案: