vue3用组合式写法如何将pinia状态管理中如何使用app.config.globalProperties

在Vue 3的组合式API中，可以使用`inject`和`provide`来访问和提供全局属性。在使用Pinia状态管理库时，可以将`app.config.globalProperties`注入到组件中，以便在组件中访问和使用全局属性。

以下是一个示例，在组件中使用`app.config.globalProperties`来访问全局属性：

import { defineComponent, inject } from 'vue'
import { useAppStore } from './store'

export default defineComponent({
  setup() {
    const app = inject('app')
    const store = useAppStore()

    const handleClick = () => {
      // 访问全局属性
      console.log(app.config.globalProperties.someGlobalProperty)
      
      // 使用Pinia状态管理
      store.increment()
    }

    return {
      handleClick
    }
  }
})

在Vue 3中，`app.config.globalProperties`是一个`readonly`的对象，如果需要改变它的值，可以使用`app.provide`和`inject`来提供和访问一个可变的对象。以下是一个示例：

import { createApp, inject, provide } from 'vue'

const app = createApp(...)

// 可变的全局属性
const someMutableGlobalProperty = {
  foo: 'bar'
}

// 提供可变的全局属性
provide('mutableGlobals', someMutableGlobalProperty)

// 访问可变的全局属性
const mutableGlobals = inject('mutableGlobals')

// 修改可变的全局属性
mutableGlobals.foo = 'baz'

需要注意的是，提供和访问可变的全局属性需要使用相同的`provide`和`inject`的键。