Question

我正在尝试根据用户是否通过身份验证来创建简单的反应式导航。登录视图上的登录方法在本地存储中设置令牌。如果设置，我要显示注销按钮。我尝试了计算，标准方法和道具，但无济于事。

登录时，导航不会更新。但是，如果我刷新页面（重新初始化应用程序），它会显示注销按钮。

我到底在做什么错？

我已经尝试了几个小时来掌握Vue JS的概念，并且濒临戒烟。我本来需要花费几分钟来完成服务器端工作，却花费了我数小时来进行客户端工作。反应性在哪里？

导航

  <template>
    <nav class="navbar navbar-expand-lg navbar-dark bg-primary">
      <a class="navbar-brand" href="#">App</a>
      <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarColor01" aria-controls="navbarColor01" aria-expanded="false" aria-label="Toggle navigation">
        <span class="navbar-toggler-icon"></span>
      </button>
      <div class="collapse navbar-collapse" id="navbarColor01">
        <ul class="navbar-nav">
          <li class="nav-item active">
            <a class="nav-link" href="#">
              <router-link to="/">Home</router-link>
              <span class="sr-only">(current)</span>
            </a>
          </li>
          <li class="nav-item">
              <router-link to="/about" class="nav-link">About</router-link>
          </li>
        </ul>
        <ul class="navbar-nav ml-auto">
          <li class="nav-item" v-if="hasAuth()"><a @click="logout()" class="nav-link">Log Out</a></li>
          <template v-else> 
            <li class="nav-item">
              <router-link to="/register" class="nav-link">Register</router-link>
            </li>
            <li class="nav-item">
              <router-link to="/login" class="nav-link">Login</router-link>
            </li>
          </template>
        </ul>
      </div>
    </nav>
  </template>

  <script>
  export default {
    name: 'Nav',
    data: () => {
      return {
        auth: false
      }
    },
    methods: {
      logout: function () {
        localStorage.removeItem('user-token');
        this.$router.push({ path: 'login' });
      },
      hasAuth: function () {
        this.auth = (localStorage.getItem('user-token')) ? true : false;
        return this.auth
      }
    },
  };
  </script>

App.vue

<template>
  <div id="app">
    <Nav></Nav>
    <router-view/>
  </div>
</template>

<script>
import Nav from '@/components/Nav.vue';

export default {
  components: {
    Nav,
  },
}
</script>

Answer 1

Vue.js是反应性的，而localStorage不是。 Vue无法知道localStorage是否被修改。本地存储没有可用的本地更改事件。

要解决此问题，请将 Vuex 与本地存储结合使用以获取持久数据。此时，将令牌保存到本地存储的位置也将副本保存在Vuex存储中。

另一个类似Nav的组件应从Vuex存储中读取反应性的数据。刷新页面时，使用localStorage中的数据初始化Vuex存储。

通过这种方式，您可以获得完美的反应系统。

Vue中的反应性导航组件

1 个答案: