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企服之家，中国第一个企服评测及商务社交产业平台。