uniapp vue3 全局app.config.globalProperties挂载的值如何改变

uniApp 的全局 App.config.globalProperties 可以通过修改组件内的数据来间接改变其挂载的值。因为这个全局属性通常会被 Vue 应用实例挂载到原型上，所以当你在组件内部更新对应的变量时，全局范围内都能看到变化。

例如，在一个 Vue 组件中，假设你有一个名为 `myValue` 的数据：

export default {
  data() {
    return {
      myValue: '初始值'
    }
  },
  mounted() {
    // 这里可以更新 globalProperties 中的值
    this.$app.config.globalProperties.myValue = this.myValue;
  }
}

然后你在其他地方需要更改 `myValue`，只需要在这个组件内部操作即可，如：

// 在另一个部分或生命周期钩子中修改 myValue
this.myValue = '新的值';

这样全局的 `myValue` 就会被更新了。

注意：全局属性的改变会立即生效，并且在整个应用中共享，所以在管理状态的时候要确保安全性，避免全局混乱。

相关问题

app.config.globalProperties.$axios

这是一个 Vue.js 中使用 Axios 的常见方法。在 Vue.js 中，可以通过 `app.config.globalProperties` 全局注册一个方法或属性。在这种情况下，我们可以将 Axios 实例作为全局属性注册，以便在整个应用程序中使用。

具体地说，`app.config.globalProperties.$axios` 表示将 Axios 实例作为 `$axios` 属性注册到 Vue.js 应用程序的全局属性中。这意味着我们可以在组件中使用 `$axios` 来发起网络请求。

示例代码如下：

import { createApp } from 'vue'
import axios from 'axios'
import App from './App.vue'

const app = createApp(App)

app.config.globalProperties.$axios = axios

app.mount('#app')

在上面的示例中，我们首先导入了 `axios` 模块，并在 `createApp` 函数中将其作为全局属性注册。然后，我们将创建的 Vue.js 应用程序挂载到 `#app` DOM 元素上。

现在，我们可以在组件中使用 `$axios` 属性来发起网络请求了。例如：

export default {
  mounted () {
    this.$axios.get('/api/data')
      .then(response => {
        console.log(response.data)
      })
  }
}

在上面的示例中，我们在组件的 `mounted` 生命周期钩子中使用 `$axios` 属性发起了一个 GET 请求，并在控制台中打印响应数据。

const app = createApp(App); app.config.globalProperties.$echarts = ECharts; vue3组件里怎么用$echarts

在 Vue 3 中，我们可以使用 `app.config.globalProperties` 来挂载全局变量或方法，比如上述代码中使用 `$echarts` 挂载了 `ECharts` 对象。然后在 Vue 组件中就可以通过 `this.$echarts` 来使用 `ECharts` 对象了。

下面是一个简单的使用示例：

<template>
  <div ref="chart" style="width: 100%; height: 400px;"></div>
</template>

<script>
export default {
  mounted() {
    // 使用 this.$echarts 来获取 ECharts 对象
    const chart = this.$echarts.init(this.$refs.chart);

    // 使用 ECharts API 来配置图表
    chart.setOption({
      title: {
        text: 'ECharts 入门示例'
      },
      tooltip: {},
      xAxis: {
        data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日']
      },
      yAxis: {},
      series: [{
        name: '销量',
        type: 'bar',
        data: [5, 20, 36, 10, 10, 20, 5]
      }]
    });
  }
}
</script>

在 `mounted` 钩子函数中，我们使用 `this.$echarts` 获取 ECharts 对象，并使用 ECharts API 来配置图表。需要注意的是，我们在模板中使用 `ref` 属性来获取图表容器的 DOM 元素，然后在 `mounted` 钩子函数中使用 `this.$refs.chart` 来获取这个 DOM 元素，并将其传递给 `echarts.init` 方法来初始化一个 ECharts 实例。