vue 接口获取的数据赋给了两个变量,修改其中一个变量,另一个也会被修改

本文探讨了在JavaScript中如何处理从接口获取的数据,特别是当需要将数据赋值给多个变量并避免修改一个变量影响另一个时遇到的问题。通过使用JSON.parse(JSON.stringify())方法实现深拷贝,可以确保修改一个变量不会影响到另一个变量的值,从而解决了数据共享导致的意外修改问题。

假如从接口获取的数据是 [{name:“a”}],分别赋值给两个变量,在操作修改一个变量,会影响另外一个变量的修改

let arr = [{name:"a"}]
this.a = arr 
this.b = arr 

解决方法:

this.a = JSON.parse(JSON.stringify(arr)) 
this.b = JSON.parse(JSON.stringify(arr))
Vue 3 中定义和使用全局变量主要有两种方式:**挂载到原型链上**和**使用 provide/inject 机制**。Vue 官方更推荐使用 `provide/inject` 的方式,因为这样可以避免污染全局命名空间,提高组件的可维护性和可测试性。 ### 挂载到原型链上 在 Vue 3 中,可以通过 `app.config.globalProperties` 来挂载全局变量或方法,类似于 Vue 2 的 `Vue.prototype`。例如,定义一个全局变量 `$test`: ```javascript const app = createApp(App) app.config.globalProperties.$test = '这是一个全局变量' app.mount('#app') ``` 在组件中使用时,可以通过 `getCurrentInstance()` 获取到组件实例,并访问该全局变量: ```vue <script setup> import { getCurrentInstance } from 'vue' const { proxy } = getCurrentInstance() console.log(proxy.$test) </script> <template> <div>{{ $test }}</div> </template> ``` ### 使用 `provide/inject` 机制(推荐) 这种方式更符合 Vue 3 的组合式 API 设计理念,适用于跨层级组件间共享数据,尤其是在大型项目中,可以更好地组织和管理全局状态。 首先,在 `main.js` 中创建应用实例后,使用 `app.provide()` 提供一个全局可用的变量或服务。例如,定义一个封装了 Axios 的 API 实例: ```javascript import { createApp } from 'vue' import App from './App.vue' import API from './axios/index.js' const app = createApp(App) app.provide('$API', API) app.mount('#app') ``` 在组件中使用时,通过 `inject()` 获取变量: ```vue <script setup> import { inject } from 'vue' const $API = inject('$API') const testHello = () => { console.log('正在测试hello接口') $API({ url: '/hello', method: 'get' }).then(res => { console.log('hello接口请求成功', res.data) }) } </script> <template> <n-card> <n-button @click="testHello">测试 'hello' 接口</n-button> </n-card> </template> ``` ### 使用场景对比 - **挂载原型链**适用于简单的全局变量或工具方法,但在类型提示和模块化方面稍显不足。 - **`provide/inject`** 更适合复杂应用中需要共享状态或服务的情况,支持更好的类型推导和模块化管理。 ### 注意事项 - 使用 `getCurrentInstance()` 时,需注意在 `<script setup>` 中只能通过 `proxy` 属性访问挂载在原型上的变量。 - 在 TypeScript 项目中,建议为全局变量添加类型声明,以获得更好的类型提示。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值