nust3笔记（五）状态共享、数据获取

1.共享状态

使用 useState 可以定义简单的共享状态

在 composables 中定义：

//composables 目录下模块的同名导出会被自动引入

export const gongxiang = () => useState('zhuangtai', () => 100)

//useState 的第一参数为 key，第二参数为初始化的工厂函数

在页面中使用：

局部刷新跳转才会共享状态，刷新页面则不会共享状态

2.数据获取

nuxt3 中内置了以下四种请求的方法useFetch、useLazyFetch、useAsyncData、useLazyAsyncData

useAsyncData:

内置的 $fetch 可以直接进行请求

useFetch:

会在内部自动生成 key,更简洁

useFetch 会在内部自动使用 $fetch 作为请求方法，所以没有 useAsyncData 灵活

useLazyFetch、useLazyAsyncData:

useFetch 和 useAsyncData 会阻塞导航的跳转。

而使用对应的 lazy 模式，useLazyFetch 或 useLazyAsyncData 可以让导航跳转不被阻塞。

axios 兼容 node 和浏览器双端可以使用但不推荐

参考代码：

链接： https://pan.baidu.com/s/1ALNLcyBtT-DRZssnZ1araw

提取码：1111