在 Main.js 中导入 js-cookie 时出现问题

Question

我正在尝试在我的 main.js

Main.js

import * as Cookies from "js-cookie";
Vue.use(Cookies)

Using in component

 this.$Cookies.set('name', data.user, { secure: true });

Error

TypeError: Cannot read property 'set' of undefined

有什么问题？我试了一千种方法还是不行

Answer 1

您正在使用 NOT Vue（Vanilla JS 库）库，并且您正在尝试将其用作 Vue 资源。

Try using this one instead

Answer 2

Vue.use(name)用于安装一个vue插件。该包将需要一个接收 vue 实例的安装方法。

#1 您可以在没有插件的情况下使用 cookie 包，在组件中导入模块

<script>
import  Cookies from 'js-cookie';
export default {
  methods: {
    addCookie() {
      console.log('adding the cookie');
      Cookies.set('chocolate', 'chookies');
      console.log(Cookies.get());
    }
  }
}
</script>

#2你可以添加一个VUE插件，给Cookies模块设置一个Cookies原型函数。（Prototype vue 函数将可用于组件，在它们前面加上 $ 是标准的）。

src/CookiesPlugin.js

import Cookies from 'js-cookie';

const CookiesPlugin = {
  install(Vue, options) {
    Vue.prototype.$Cookies = Cookies;
  }
};

export default CookiesPlugin;

src/main.js

import CookiesPlugin from './CookiesPlugin';
Vue.use(CookiesPlugin);

组件中

this.$Cookies.set('chocolate', 'chookies');
console.log(this.$Cookies.get());

在 Main.js 中导入 js-cookie 时出现问题

Problem when importing js-cookies in Main.js

vue.js

js-cookie