Javascript Vue中的被动导航组件

我试图根据用户是否经过身份验证来创建一个简单的反应式导航。登录视图上的登录方法在localstorage中设置令牌。如果设置了，我想显示注销按钮。我尝试过计算、标准的方法和道具，但都没有用

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

我到底做错了什么

我已经尝试了几个小时来理解Vue JS的概念，我已经快要放弃了。服务器端花了我几分钟的时间，而客户端却花了我几个小时。反应性在哪里

导航vue

  <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>

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

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

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

关于



注销

登记


登录


导出默认值{
名称：'导航'，
数据：（）=>{
返回{
作者：错
}
},
方法：{
注销：函数（）{
localStorage.removietem（'user-token'）；
这是.$router.push（{path:'login'}）；
},
hasAuth:函数（）{
this.auth=（localStorage.getItem（'user-token'））？true:false；
返回此.auth
}
},
};

App.vue

  <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>

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

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

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

从“@/components/Nav.vue”导入导航；
导出默认值{
组成部分：{
导航，
},
}
虽然
Vue.js
是被动的，但
localStorage
不是
Vue
不可能知道是否修改了
localStorage
。本地存储没有可用的本地更改事件

要解决此问题，请将Vuex与本地存储结合使用，以获得持久数据。将令牌保存到本地存储的点，此时还将一个副本保存在
Vuex
store中

像
Nav
这样的另一个组件应该从
Vuex
存储中读取数据，该存储是被动的。刷新页面时，使用
localStorage
中的数据初始化Vuex存储

这样你就得到了一个完美的反应式系统。
虽然
Vue.js
是反应式的，但
localStorage
不是
Vue
不可能知道是否修改了
localStorage
。本地存储没有可用的本地更改事件

要解决此问题，请将Vuex与本地存储结合使用，以获得持久数据。将令牌保存到本地存储的点，此时还将一个副本保存在
Vuex
store中

像
Nav
这样的另一个组件应该从
Vuex
存储中读取数据，该存储是被动的。刷新页面时，使用
localStorage
中的数据初始化Vuex存储

这样你就得到了一个完美的反应系统。
你可以在这里使用不同的方法，但非常适合这种情况。您可以将
hasAuth
添加到存储中，当用户登录时，您可以
commit
提交更改。您可以检查。要使用反应性，vue需要能够检测
数据中的更改。当您从
localStorage
保存/加载时，vue无法检测到更改，并且不会更新模板（无反应性）。您可以在此处使用不同的方法，但这非常适合。您可以将
hasAuth
添加到存储中，当用户登录时，您可以
commit
提交更改。您可以检查。要使用反应性，vue需要能够检测
数据中的更改。当您从
localStorage
保存/加载时，vue无法检测到更改，并且不会更新模板（无反应性）