vue3和vue2定义全局变量

文章详细对比了Vue2和Vue3中创建应用的差异,Vue2中通过Vue.prototype来定义全局属性,如$openid,而Vue3则使用createApp并借助config.globalProperties来设置全局变量,如$mark_data。在使用时,均可以通过this.$访问这些变量。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

vue2 定义

import App from './App.vue'

import Vue from 'vue'
Vue.prototype.$openid = "openid";
App.mpType = 'app'
const app = new Vue({
  ...App
})
app.$mount()
// #endif

vue3 定义

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import webdata from "./assets/data.json" // 需要定义的变量,你可以用其他的,字符串啊,导入的函数等等的

const app = createApp(App)

// console.log(app)
// 定义变量 
app.config.globalProperties.$mark_data = webdata

// 需要最后才做渲染
app.mount('#app')

使用

因为我用的都是选项式api,所以都是使用this.$[你的变量命]使用。

### 如何在 Vue3 中通过 JSON 定义全局变量Vue3 项目中,可以通过多种方式定义全局可访问的 JSON 变量。以下是几种常见的实现方法: #### 方法一:使用 `app.config.globalProperties` 定义全局变量 Vue3 提供了 `app.config.globalProperties` 来定义可以在整个应用范围内使用的属性或方法。这种方式简单直观。 ```javascript import { createApp } from 'vue'; import App from './App.vue'; // 导入 JSON 数据 import jsonData from './assets/data.json'; const app = createApp(App); // 将 JSON 数据挂载到 globalProperties 上 app.config.globalProperties.$jsonData = jsonData; app.mount('#app'); ``` 这样,在任何组件中都可以通过 `this.$jsonData` 访问该 JSON 数据[^2]。 --- #### 方法二:利用 Vuex 存储全局状态 如果需要更复杂的管理机制,Vuex 是一种强大的解决方案。它可以用来集中存储管理应用程序的状态数据,包括 JSON 格式的变量。 ```javascript // store/index.js import { createStore } from 'vuex'; import jsonData from '../assets/data.json'; // 导入 JSON 数据 export default createStore({ state: { jsonData, // 将 JSON 数据存入 Vuex 的 state }, }); ``` 在主入口文件中引入并注册 Vuex Store: ```javascript import { createApp } from 'vue'; import App from './App.vue'; import store from './store'; const app = createApp(App); app.use(store); // 注册 Vuex Store app.mount('#app'); ``` 之后,可以在任意组件中通过 `$store.state.jsonData` 获取 JSON 数据[^3]。 --- #### 方法三:使用环境变量 (`.env`) 动态加载 对于一些固定的 JSON 数据,也可以将其作为环境变量的一部分来处理。这种方法适合于少量静态配置型的数据。 1. **创建 `.env` 文件** 在项目的根目录下新增一个 `.env` 文件,并添加如下内容: ```plaintext VUE_APP_JSON_DATA='{"key":"value"}' ``` 2. **读取环境变量中的 JSON 数据** 在主入口文件或其他地方解析环境变量中的 JSON 字符串: ```javascript const jsonData = JSON.parse(process.env.VUE_APP_JSON_DATA || '{}'); console.log(jsonData.key); // 输出 "value" ``` 此方法适用于简单的键值对形式的小规模 JSON 数据[^5]。 --- #### 方法四:借助 Webpack 或 Vite 插件注入全局变量 如果是基于 Vite 构建工具,则可以直接在配置文件中注入自定义全局变量;而基于 Webpack 则需额外安装插件完成类似功能。 ##### 对于 Vite 用户: 编辑 `vite.config.js` 文件,向环境中加入打包时间戳或者预设好的 JSON 数据: ```javascript import { defineConfig } from 'vite'; export default defineConfig({ define: { __APP_CONFIG__: JSON.stringify(require('./assets/data.json')), }, }); ``` 随后即可在代码里直接调用 `__APP_CONFIG__` 进行操作[^1]。 ##### 对于 Webpack 用户: 可以考虑使用 DefinePlugin 实现相同效果: ```javascript const webpack = require('webpack'); module.exports = { plugins: [ new webpack.DefinePlugin({ '__GLOBAL_JSON__': JSON.stringify(require('./assets/data.json')), }), ], }; ``` 最终同样能够以常量的形式获取指定路径下的 JSON 资源[^4]。 --- #### 方法五:持久化存储至浏览器本地缓存 当希望某些 JSON 数据能够在页面刷新后仍然保留下来时,可以选择将它们保存到 LocalStorage 或 SessionStorage 中去。 ```javascript // 初始化阶段写入 localStorage window.localStorage.setItem('globalJsonData', JSON.stringify(import.meta.globE(['./assets/*.json']))); // 组件内部读取 const storedData = JSON.parse(window.localStorage.getItem('globalJsonData')); console.log(storedData); ``` 注意这种做法仅限前端运行环境下有效。 --- ### 总结 以上列举了几种不同的技术手段帮助开发者实现在 Vue3 应用程序内共享 JSON 类型的信息资源。具体选用哪一类取决于实际需求场景以及团队开发习惯等因素考量。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

圈点Studio

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值