Vue.js 3中使用vue-cookies遇到报错问题求助

问题根源 #

从报错截图判断，当前导入方式不符合vue-cookies在Vue3中的规范，且TypeScript项目可能缺少对应的类型声明文件，导致识别错误。

解决步骤 #

1. 修正导入代码 #

vue-cookies在Vue3中是默认导出，不是解构导出，修改main.ts代码如下：

import VueCookies from 'vue-cookies';
import { createApp } from 'vue';
import App from './App.vue';
import router from './router';

const app = createApp(App);
app.use(router).use(VueCookies, { expires: '1d' }).mount('#app');

2. 安装TypeScript类型声明（可选但推荐） #

如果仍有类型报错，安装对应的类型包：

npm install @types/vue-cookies --save-dev

3. 组件中使用示例 #

• 选项式API：

export default {
  mounted() {
    this.$cookies.set('user', 'test');
    console.log(this.$cookies.get('user'));
  }
}

• 组合式API：

import VueCookies from 'vue-cookies';

export default {
  setup() {
    VueCookies.set('user', 'test');
    console.log(VueCookies.get('user'));
  }
}

4. 版本兼容检查（若上述无效） #

确保安装的vue-cookies是适配Vue3的版本，执行以下命令更新到最新稳定版：

npm install vue-cookies@latest --save

内容的提问来源于stack exchange，提问作者Arturo Cabrera