Vue3 - 如何在组件外部使用 cookie？答案

【问题标题】：Vue3 - How to work with cookies outside components?Vue3 - 如何在组件外部使用 cookie？
【发布时间】：2023-02-24 17:48:32
【问题描述】：

我需要使用 cookie 来存储 vue 3 中登录用户的访问令牌。为此，我使用了“vue-cookies”npm 包。

它在组件内部完美运行 - 但我需要在组件外部获取 cookie。

这是我的 vue 3 项目中的 main.ts：

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

import './assets/main.css'

const app = createApp(App)

app.use(createPinia())
app.use(router)
app.use(VueCookies, { expires: '15m' })

app.mount('#app')

在“LoginItem.vue”组件中，我有以下代码，标签内有 $cookies：

// ...
    const $cookies = inject<VueCookies>('$cookies')
    const token = ref('')
// ...

    onMounted(() => {
      const accessToken = $cookies?.get('accessToken')
      if (accessToken) {
        token.value = accessToken
      }
    })

上面的代码成功运行。但我想创建一个全局模块/文件/方式来处理使用访问令牌的常见操作。

因此，我创建了文件“auth.ts”，试图使用与组件相同的逻辑，但不幸的是它没有工作：

import { inject } from 'vue'
import type { VueCookies } from 'vue-cookies'

const $cookies = inject<VueCookies>('$cookies')

export const getToken = (): string => {
  return $cookies?.get('accessToken')
}

$cookie 始终未定义。

我该如何解决？

此外，在 Vue 3 范例中，建议以我正在尝试的方式进行此访问令牌管理，或者我应该寻求其他方法吗？

【问题讨论】：

除了 comp 设置，在任何地方使用 inject 都是错误的。框架无法确定注入什么价值，否则。在这里使用它有什么意义？您可以导入它并按原样使用，对于具有 DI 或循环依赖的特殊情况，需要提供/注入
@EstusFlask 抱歉，我还在学习 vue3，我还在探索如何完成这些事情。我只是注射看看是否有效
没问题，我发布了一个答案以防有帮助

标签： typescript vue.js cookies

【解决方案1】：

除了同时执行的组件设置和选项 API 挂钩（created 等），在任何地方使用 inject 都是错误的。 provide/inject 依赖于组件层次结构，否则框架无法确定要注入什么价值。

可以直接导入值并使用，provide/inject 用于一些特殊用例，例如依赖注入或避免循环依赖。

可以看出here插件实例除了application实例外没有暴露在任何地方，所以它将以app.$cookies的形式可用，它可以在非组件模块中使用，但可能会导致循环依赖。不有效地解析 CD 将导致应用程序无法在某些环境中捆绑。在这种情况下，可以通过将应用程序实例提取到单独的模块而不是在导入时立即引用根组件来放宽 CD 限制，例如应用程序.js：

import { createApp, h } from 'vue'
export const app = createApp({ render: () => h(App) })

然后在main.js和其他需要访问app.$cookies的模块中导入app。

使用反应式全局存储而不是 cookie 作为单一事实来源很有用，存储可以同步到 cookie 或本地存储。这可以通过 Pinia 存储和持久性插件轻松实现。由于此处已使用 Pinia，因此这是更可取的方式。商店可以直接在任何地方导入，避免了上述CD的相关问题。

【讨论】：