使用vue3-cookies时Vue组合式API出现Object(...) is not a function错误如何解决？

报错核心原因 #

你当前使用的vue3-cookies版本已移除具名导出useCookies，使用import { useCookies }语法导入得到的是undefined，调用非函数值就会触发Object(...) is not a function报错。

修复方案 #

方案一：调整导入语法 #

无需全局注册插件，直接调整导入方式即可直接在组件中使用：

// 改为默认导入
import VueCookies from "vue3-cookies";
const { cookies } = VueCookies.useCookies();

// 后续正常调用cookies方法即可
cookies.set('test_key', 'test_value')

方案二：全局注册后调用 #

如果项目需要统一配置cookies全局规则，先在入口文件main.js中注册插件：

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

const app = createApp(App)
// 注册时可传入全局配置，比如过期时间、作用域路径等
app.use(VueCookies, {
  expireTimes: "30d",
  path: "/",
})
app.mount('#app')

之后在组合式API组件中通过全局实例获取cookies对象：

import { getCurrentInstance } from 'vue'

const { $cookies } = getCurrentInstance().appContext.config.globalProperties
// 调用示例：$cookies.get('test_key')

方案三：重装依赖包 #

如果以上方案均无效，说明本地安装的依赖包版本异常，先卸载再安装最新版本即可：

npm uninstall vue3-cookies
npm install vue3-cookies@latest

内容的提问来源于stack exchange，提问作者Milos N.