'this.$cookies.set'的'无法读取未定义的属性'set''错误[重复]

Question

我正在尝试为我的 Vue 项目设置一些基本的 cookie，但在尝试设置 cookie 时遇到了标题错误。根据我的 package.json 文件，我正在使用 vue-cookies 版本 ^1.7.4。当我单击按钮制作 cookie 时，完整的错误消息如下：

ncaught TypeError: Cannot read property 'set' of undefined
    at Proxy.setCookie (VM6493 Register.vue:45)
    at Object.onClick._cache.<computed>._cache.<computed> (Register.vue?db27:29)
    at callWithErrorHandling (runtime-core.esm-bundler.js?5c40:154)
    at callWithAsyncErrorHandling (runtime-core.esm-bundler.js?5c40:163)
    at HTMLButtonElement.invoker (runtime-dom.esm-bundler.js?830f:333)
setCookie @ VM6493 Register.vue:45
Object.onClick._cache.<computed>._cache.<computed> @ Register.vue?db27:29
callWithErrorHandling @ runtime-core.esm-bundler.js?5c40:154
callWithAsyncErrorHandling @ runtime-core.esm-bundler.js?5c40:163
invoker @ runtime-dom.esm-bundler.js?830f:333

带有cookie设置按钮的页面就是这个Register.vue文件：

<template>
  <layout>
    <button v-on:click="setCookie()">Click For Cookie</button>
  </layout>
</template>

<script>
import Layout from "./components/Layout";
import axios from "axios";


export default {
  name: "Home",
  components: {
    Layout,
    vlink
  },
  data: () => {
    return {
      username: "",
    }
  },
  methods: {
    setCookie() {
      this.$cookies.set("username", "bilbobaggins")
    }
  }
}
</script>

<style scoped>

</style>

我在导航到 Register.vue 页面时收到此警告：

[Vue warn]: Extraneous non-props attributes (install, config, get, set, remove, isKey, keys) were passed to component but could not be automatically inherited because component renders fragment or text root nodes. 
  at <Layout install=fn<install> config=fn<config> get=fn<get>  ... > 
  at <Home install=fn<install> config=fn<config> get=fn<get>  ... > 
  at <App install=fn<install> config=fn<config> get=fn<get>  ... >

这是我的 main.js 文件：

import {createApp, h} from 'vue'
import App from './App.vue'
import Register from "./Register"
import "./vue-api-call/styles.css"
import VueCookies from 'vue-cookies'


const routes = {'/': App, '/register': Register}
const SimpleRouter = {
  data: () => ({
    currentRoute: window.location.pathname
  }),
  computed: {
    CurrentComponent() {
      return routes[this.currentRoute]
    }
  },
  render() {
    return h(this.CurrentComponent)
  }
}


createApp(SimpleRouter, VueCookies).mount("#app")

我尝试将 Register.vue 文件中的函数从 'this' 更改为 'window' 或 'VueCookies' 在导入后，但没有奏效。我还尝试了不同的方法来“.use”我的 main.js 文件中的 VueCookies 模块，但是，我要么不擅长，要么这不是问题。任何帮助，将不胜感激。谢谢！

编辑：刚刚尝试在我的 Register.vue 文件的脚本部分中导入 Vue-Cookies 并将函数更改为 VueCookies.VueCookies.set("username", "bilbobaggins") 但是，这给出了相同的错误消息。

Answer 1

显然vue-cookie 模块不适用于Vue 3，因为install 函数使用Vue 2 版本Vue.prototype.$cookie 使其在所有组件中可用。 Vue.prototype 现在是 Vue 3 中的 Vue.config.globalProperties (https://v3.vuejs.org/guide/migration/global-api.html#vue-prototype-replaced-by-config-globalproperties)。这仍然是vue-cookie 模块 GitHub 存储库中的一个未解决问题：https://github.com/cmp-cc/vue-cookies/issues/59。

如果您使用的是 Vue 3，那么您需要转到 vue-cookies 节点模块并进行更改：

install: function (Vue) {
            Vue.prototype.$cookie = this;
            Vue.cookie = this;
        },

到这里：

install: function (Vue) {
            Vue.prototype ? Vue.prototype.$cookies = this : Vue.config.globalProperties.$cookies = this;
            Vue.cookie = this;
        },

LittleWhiteLoti 提供了这个修复，感谢他们：https://github.com/cmp-cc/vue-cookies/issues/59#issuecomment-823796719