Nuxt3 全局变量接口前缀全局配置，全局方法，全局状态管理

接口前缀全局配置，全局变量

1.像api前缀这类的全局变量一般配置在nuxt.config.ts文件中。如下：

nuxt.config.ts

可以在public下定义全局变量，且public 下的变量可以在客户端和服务端使用

在其他任意vue或者js、ts文件中，可通过以下方式获取变量

const { public: { apiBase } } = useRuntimeConfig()

全局状态管理

1、全局变量共享

在根目录下新建composables文件夹，该文件夹下的文件会被nuxt3自动导入全局，在该文件夹下新建一个ts文件，例如我创建了一个state.ts文件

state.ts

// state.ts

/**简单数据类型示例 */
export const useColor = () => useState<string>('color', () => 'red')


/**复杂数据类型示例 */
interface test{
    /**姓名 */
    name: string,
    /**年龄 */
    age: number
    /**数组 */
    arr: number[]
}
export const usePeople = () =>  useState<test>('people',()=>({ //箭头函数return对象时的简写
    name: '小明',
    age: 18,
    arr: [1,2]
}))

定义了两个全局变量，color和people，在页面中调用如下：

<template>
    <div>
        <div>{{ color }} </div>
        <div>{{ people.name}} </div>
    </div>
</template>

<script setup>

const color = useColor()
const people = usePeople()

const add = (e) =>{
  counter.value += e
}
</script>

<style lang="scss" scoped>

</style>

全局状态不仅可以在vue页面中调用也可以在ts页面中调用，如果需要修改其值，可以直接通过以下方式修改：

const color = useColor()
color.value = '#fff'

2、全局方法

使用：

useUserStore().value.getCurrentUser()