【Nuxt】编写接口和全局状态共享

编写接口

~/server/api/homeInfo.get.ts

export default defineEventHandler((event) => {
    return {
        code: 200,
        data: {
            name: 'hello world'
        }
    }
})

服务端有一些方法可以快速获取请求常见字段：

• getQuery(event)
• getMethod(event)
• await readBody(event)
• await readRawBody(event)

const {data} = await  useFetch('/api/homeInfo', {
  method: 'GET'
})
console.log(data)

设置获取 cookie （client and server）：

全局状态共享

useState

1. 在composables目录下创建一个模块，如：composables/states.ts
2. 在states.ts中使用useState定义需全局共享状态，并导出(默认导出共享文件名，否则直接使用函数名)
3. 在组件中导入states.ts导出的全局状态

~/composables/useCounter.ts

export default function () {
    return useState('counter', () => 10)
}

// 或者
export const useCounter = () => {
    return useState('counter', () => 10)
}

const count = useCounter()
console.log(count.value)

• useState只能用在setup函数和Lifecycle Hooks中
• useState不支持classes,functions or symbols类型，因为这些类型不支持序列化

Pinia

nuxt 集成 pinia

@pinia/nuxt会处理state 同步问题，比如不需要关心序列化或XSS攻击等问题。

安装：

npm i pinia --legacy-peer-deps
npm i @pinia/nuxt

nuxt.config.ts

export default defineNuxtConfig({
    compatibilityDate: '2024-04-03',
    devtools: {enabled: true},
    modules: [
        '@pinia/nuxt',
    ]
});

~/store/home.ts

export const useHomeStore = defineStore('home', {
    state: () => {
        return {
            count: 0
        }
    },
    actions: {
        increment() {
            this.count++
        },
        async fetchData() {
            await fetch('https://jsonplaceholder.typicode.com/todos/1')
                .then(response => response.json())
                .then(json => console.log(json))
        }
    }
})

const homeStore = useHomeStore()
const {count} = storeToRefs(homeStore)
console.log(count.value)

useState vs pinia