一起养成写作习惯!这是我参与「掘金日新计划 · 4 月更文挑战」的第14天,点击查看活动详情。
Nuxt3-学习之路 14, 状态共享-useState
引言
本系列会以我的一个理解,来介绍并开始学习 Nuxt3。
中间会插入自己所联系到的 乱七八糟 的 知识点。
状态共享
说到状态共享,我们应该能直接想到 Vue 中的经典 状态管理 Vuex。
那 Nuxt3 的 状态管理 又有什么?又有什么好用的地方呢?
这里先说一个 与 app.vue 同级目录下 的 一个可复用组合逻辑的目录 composables
它的一个作用就是,在其目录下创建的文件会被系统 自动识别,然后导入到应用程序中,之后全局进行共享。
下面一起学习一下
useState
这个 API 是状态共享的主要方法,它的作用就是用来创建跨组件。
它有两个重要的参数,第一个是唯一 key,第二个是 init 函数
我们接下来进行使用,首先创建文件目录及代码
| composables/
--| useFoo.ts
| app.vue
复制代码
在 useFoo.ts 里面注册一个函数
export const useFoo2 = () => {
return useState('foo', () => '我是 composables 下的函数 useFoo')
}
复制代码
这里可以看到我导出的是 useFoo2 的一个函数
那我这里提出一个疑问,大家来猜猜,我们使用状态管理,是引入 useFoo 呢 还是 useFoo2。
之后在根目录 pages/index.vue 下进行引入和使用。
这里看到,我用的是 foo1,不是使用的唯一 key 作为接受参数。那么这里会渲染么?
我们查看页面输出结果。
可以看到结果是输出的,那我们总结下上面的两个疑问点。
-
导出函数是否与文件名有关?
答案:是没有关系的,只与自身导出的函数名有关
-
引入函数时,创建的变量名是否与获取的关键 key 有关
答案:是没有关系的,只与自己创建的变量名有关
但是,我这里还是推荐使用 key 名,作为自己的变量名,这样也不容易混淆。
多函数-同一key
这里再强调一个重要的知识点,假如我不小心多个函数使用了同一个 key
大家可以猜一下,会发生什么样的结果呢?
我们在 useFoo.ts 里,新增一个 useFoo3 函数,并在根路由中引入和使用。
结果展示:
可以看到是使用了 useFoo2 的结果作为值。
那这里又有疑问了,是根据我们导出的顺序定的呢?还是引入的顺序定的呢?
这里快速贴图,回答下结果
-
导入换一下顺序,引入顺序不换
-
导入顺序不变,引入顺序改变
注意浏览器状态栏是不会警告和报错的,这就可怕了。所以最后再总结一下。
总结:假设同一个key,在同一个页面中,只有引入的顺序有关,以第一个引入的将作为结果进行返回。所以我们在开发时,一定要小心 key 值,尽量唯一.
总结
学习了 Nuxt3 的 状态共享-useState,可以很方便的进行跨组件的使用,非常的方便和快捷,以及总结了会出现的各种疑问点。