一起养成写作习惯！这是我参与「掘金日新计划 · 4 月更文挑战」的第14天，点击查看活动详情。

Nuxt3-学习之路 14，状态共享-useState

引言

本系列会以我的一个理解，来介绍并开始学习 Nuxt3。

中间会插入自己所联系到的乱七八糟的 知识点。

说到状态共享，我们应该能直接想到 Vue 中的经典状态管理 Vuex。

那 Nuxt3 的状态管理又有什么？又有什么好用的地方呢？

这里先说一个与 app.vue 同级目录下的一个可复用组合逻辑的目录 composables

它的一个作用就是，在其目录下创建的文件会被系统 自动识别，然后导入到应用程序中，之后全局进行共享。

下面一起学习一下

这个 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

大家可以猜一下，会发生什么样的结果呢？

我们在 useFoo.ts 里，新增一个 useFoo3 函数，并在根路由中引入和使用。

结果展示：

可以看到是使用了 useFoo2 的结果作为值。

那这里又有疑问了，是根据我们导出的顺序定的呢？还是引入的顺序定的呢？

这里快速贴图，回答下结果

注意浏览器状态栏是不会警告和报错的，这就可怕了。所以最后再总结一下。

总结：假设同一个key，在同一个页面中，只有引入的顺序有关，以第一个引入的将作为结果进行返回。所以我们在开发时，一定要小心 key 值，尽量唯一.

学习了 Nuxt3 的状态共享-useState，可以很方便的进行跨组件的使用，非常的方便和快捷，以及总结了会出现的各种疑问点。