為什么 vue-cookies 在一個視圖中工作，而不是另一個？

Question

我在我的 Login.vue 上使用vue-cookies設置了一個令牌 cookie，它工作正常。 cookie 被設置。

但是當我想在另一個視圖中訪問 cookie 時，我在 chrome 控制台中收到以下錯誤。

Uncaught (in promise) TypeError: Cannot read property 'get' of undefined
at _callee$ (Dashboard.vue?98fa:19)
at tryCatch (runtime.js?96cf:63)
at Generator.invoke [as _invoke] (runtime.js?96cf:293)
at Generator.eval [as next] (runtime.js?96cf:118)
at asyncGeneratorStep (asyncToGenerator.js?1da1:3)
at _next (asyncToGenerator.js?1da1:25)
at eval (asyncToGenerator.js?1da1:32)
at new Promise (<anonymous>)
at eval (asyncToGenerator.js?1da1:21)
at VueComponent.getWallets (Dashboard.vue?98fa:18)

這是 cookie 工作的 Login.vue。

<template>
  <div class="login">
    <div
      class="register shadow-lg container my-20 mx-auto px-20 py-20 rounded-lg border-2"
    >
      <h1 class="text-left text-4xl">Login Page</h1>
      <form class="flex flex-col py-10" v-on:submit.prevent="login">
        <label class="text-left py-4" for="email">Email:</label>
        <input
          class="rounded-lg border-2 py-2 px-2"
          id="email"
          v-model="email"
          placeholder="Alex123@example.com"
        />
        <label class="text-left py-4" for="password">Password:</label>
        <input
          class="rounded-lg border-2 py-2 px-2"
          v-model="password"
          id="password"
          placeholder="supersecretpassword123"
        />
        <button
          class="p-3 shadow hover:bg-green-400 bg-green-300 w-40 my-4 rounded-lg text-white text-lg"
          type="submit"
        >
          Login
        </button>
      </form>
    </div>
  </div>
</template>

<script>
export default {
  name: "Login",
  data() {
    return {
      email: this.email,
      password: this.password
    };
  },
  components: {},
  methods: {
    async login() {
      try {
        var response = await this.$http.post("/Login", {
          email: this.email,
          password: this.password
        });

        if (response.status == 200) {
          this.$cookies.set("token", response.data.token);
          this.$router.push("/dashboard");
        }
      } catch (err) {
        console.log(err);
        this.error = err.message;
      }
    }
  }
};
</script>

這是 cookie 不起作用的 Dashboard.vue

<template>
  <div>
    <h1>This is the login dashboard</h1>
  </div>
</template>

<script>
export default {
  name: "Dashboard",
  data() {
    return {
      wallets: this.wallets,
      user: this.user
    };
  },
  components: {},
  methods: {
    async getWallets() {
      var token = this.$cookies.get("token"); 
      let config = {
        headers: { Authorization: 'Bearer ' + token }
      };
      var response = await this.$http.get("/Wallet", config);
      this.wallets = response.data.wallet;
    }
  },
  mounted: function() {
    this.getWallets();
  }
};
</script>

這是 main.js

import Vue from "vue";
import App from "./App.vue";
import router from "./router";
import store from "./store";
import axios from "./backend/vue-axios";
import VueCookies from "vue-cookies";
import "./main.css";

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  axios,
  render: h => h(App)
}).$mount("#app");

Vue.use(VueCookies);
Vue.$cookies.config("7d");

Answer 1

插件應該在實例化 Vue 實例之前安裝，所以將VueCookies安裝移到new Vue()之前：

Vue.use(VueCookies);
Vue.$cookies.config("7d");

new Vue({
  router,
  store,
  axios,
  render: h => h(App)
}).$mount("#app");