vue3 全局token的做法

在 Vue3 中，可以将全局的 token 存储在一个名为 `provide/inject` 的全局 API 中。`provide/inject` 可以让父组件向子组件传递数据，而不必一层一层地传递。这些数据可以在整个应用程序中使用，类似于全局变量。

具体的做法如下：

1. 在 `main.js` 中，使用 `provide` 来提供一个名为 `token` 的变量，该变量存储你的全局 token：

import { createApp, provide } from 'vue'
import App from './App.vue'

const app = createApp(App)

provide('token', 'your_global_token_here')

app.mount('#app')

2. 在需要使用全局 token 的组件中，使用 `inject` 来注入 `token` 变量：

import { defineComponent, inject } from 'vue'

export default defineComponent({
  setup() {
    const token = inject('token')
    // 在这里可以使用 token 变量
  }
})

这样，你就可以在整个应用程序中使用 `token` 变量了，而不必每次都传递它。同时也避免了全局变量污染和命名冲突的问题。

相关问题

vue项目全局token, jquery

对于 Vue 项目中的全局 token，可以使用 Vue 的插件机制将其注入到 Vue 实例中，从而在整个项目中都可以使用该 token，例如：

// 创建一个 Vue 插件
const TokenPlugin = {
  install(Vue) {
    Vue.prototype.$token = "your-global-token";
  }
};

// 在 Vue 项目中使用该插件
Vue.use(TokenPlugin);

// 在组件中使用全局 token
export default {
  created() {
    console.log(this.$token); // 输出 "your-global-token"
  }
};

至于 jQuery，它是一个独立的 JavaScript 库，不依赖于 Vue。如果你需要在 Vue 项目中使用 jQuery，可以通过以下两种方式之一：

1. 在 HTML 文件中直接引入 jQuery：

<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>

然后在 Vue 组件中使用全局变量 `$` 来调用 jQuery 方法，例如：

export default {
  created() {
    $("body").css("background-color", "red");
  }
};

2. 使用 npm 安装 jQuery，并在 Vue 组件中导入：

npm install jquery

import $ from "jquery";

export default {
  created() {
    $("body").css("background-color", "red");
  }
};

注意，使用 jQuery 时需要注意它的版本兼容性问题，尽量使用最新版本的 jQuery。另外，Vue 推荐使用它自带的 DOM 操作方法，如 `this.$refs`、`this.$el` 等，尽量减少对 jQuery 的依赖。

在vue中 获取全局token

在 Vue 中，如果您使用的是 Vue-CLI 构建项目，可以在 `main.js` 文件中设置全局的 token。例如：

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

// 设置全局 token
Vue.prototype.$token = 'your_token_here'

new Vue({
  render: h => h(App),
}).$mount('#app')

然后，在其他组件中，您可以使用 `this.$token` 来获取全局的 token。例如：

export default {
  mounted() {
    console.log(this.$token) // 输出全局的 token
  }
}

当然，如果您的应用程序需要通过 API 从后端服务器获取 token，则可以在应用程序的入口点（如登录页面）中获取 token，并将其存储在全局状态管理器（如 Vuex）中。然后，您可以在整个应用程序中使用该状态管理器来获取 token。