ToB企服应用市场:ToB评测及商务社交产业平台

标题: vue设置全局变量：让你的数据无处不在！ [打印本页]
作者: 欢乐狗    时间: 2024-8-12 07:57
标题: vue设置全局变量：让你的数据无处不在！
媒介

   在 vue 开发中，如何设置全局变量是一个关键题目。本文将介绍多种方法，资助大家轻松实现全局变量的共享，提升 vue 项目标开发服从。让我们一起来探索这些方法，为你的 vue 项目带来更好的开发体验。
  
方法一：使用 Vue.prototype

通过在 vue 的原型上定义属性，可以在所有组件中访问该属性。例如，我们可以在 main.js 文件中添加以下代码：
   main.js文件
  1. Vue.prototype.$globalVar = 'Hello World';
复制代码
然后，在任何组件中，我们都可以通过 this.$globalVar 来访问该全局变量。
   恣意一个组件内
  1. <template>
  2.   <div>
  3.     {{this.$globalVar}}
  4.   </div>
  5. </template>
复制代码
  页面展示
  

方法二：使用 Vue.mixin

通过混入(mixin)的方式，可以将一些公共的属性或方法混入到所有组件中。例如，我们可以在 main.js 文件中添加以下代码：
   main.js文件
  1. Vue.mixin({
  2.     data() {
  3.         return {
  4.             globalVar: 'Hello World'
  5.         };
  6.     }
  7. });
复制代码
然后，在任何组件中，我们都可以通过 this.globalVar 来访问该全局变量。
   恣意一个组件内
  1. <template>
  2.   <div>
  3.     {{this.globalVar}}
  4.   </div>
  5. </template>
复制代码
  页面展示
  

方法三：使用 Vue.observable

通过 Vue.observable 方法，可以创建一个可响应的对象，该对象可以在所有组件中共享。例如，我们可以在 main.js 文件中添加以下代码：
   main.js文件
  1. const globalData = Vue.observable({
  2.   globalVar: 'Hello World'
  3. });
  4. export default globalData;
复制代码
然后，在任何组件中，我们可以通过导入 globalData 并访问 globalData.globalVar 来访问该全局变量。
   恣意一个组件内
  1. <template>
  2.   <div>
  3.     {{globalData.globalVar}}
  4.   </div>
  5. </template>
  7. <script>
  8. import globalData from "@/main";
  9. export default {
  10.   data() {
  11.     return {
  12.       globalData,
  13.     };
  14.   },
  15. };
  16. </script>
复制代码
  页面展示
  

方法四：使用 Vuex

vuex 是 vue 的官方状态管理库，可以用于管理全局状态。通过在 vuex 中定义 state，可以在所有组件中访问该状态。例如，我们可以在 store.js 文件中添加以下代码：
   store/index.js文件
  1. import Vue from 'vue'
  2. import Vuex from 'vuex'
  3. Vue.use(Vuex)
  4. export default new Vuex.Store({
  5.   state: {
  6.     globalVar: 'Hello World'
  7.   },
  8.   // ......
  9. })
复制代码
然后，在任何组件中，我们可以通过 this.$store.state.globalVar 来访问该全局变量。
   恣意一个组件内
  1. <template>
  2.   <div>
  3.     {{this.$store.state.globalVar}}
  4.   </div>
  5. </template>
复制代码
  页面展示
  

方法五：使用 localStorage 或 sessionStorage

通过将变量存储在 localStorage 或 sessionStorage 中，可以在所有组件中共享该变量。例如，我们可以在某个组件中添加以下代码：
   a.vue文件
  1. <template>
  2.   <div></div>
  3. </template>
  4. <script>
  5. export default {
  6.   mounted() {
  7.     localStorage.setItem("globalVar", "Hello World");
  8.   },
  9. };
  10. </script>
复制代码
然后，在其他组件中，我们可以通过 localStorage.getItem('globalVar') 来访问该全局变量。
   b.vue
  1. <template>
  2.   <div>{{title}}</div>
  3. </template>
  5. <script>
  6. export default {
  7.   data() {
  8.     return {
  9.       title: "",
  10.     };
  11.   },
  12.   mounted() {
  13.     const value = localStorage.getItem("globalVar");
  14.     if (value) {
  15.       this.title = value;
  16.     }
  17.   },
  18. };
  19. </script>
复制代码
  页面展示
  


免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。



欢迎光临 ToB企服应用市场:ToB评测及商务社交产业平台 (https://dis.qidao123.com/) Powered by Discuz! X3.4