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

引言

本系列会以我的一个理解，来介绍并开始学习 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 作为接受参数。那么这里会渲染么？

我们查看页面输出结果。

可以看到结果是输出的，那我们总结下上面的两个疑问点。

导出函数是否与文件名有关？

<p><em>答案：是没有关系的，只与自身导出的函数名有关</em></p>
</li>
<li>
<p>引入函数时，创建的变量名是否与获取的关键 <em>key</em> 有关</p>

<p><em>答案：是没有关系的，只与自己创建的变量名有关</em></p>

<p>但是，我这里还是推荐使用 <em>key</em> 名，作为自己的变量名，这样也不容易混淆。</p>
</li>

多函数-同一key

这里再强调一个重要的知识点，假如我不小心多个函数使用了同一个 key

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

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

结果展示：

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

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

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

导入换一下顺序，引入顺序不换

<p><img alt="image.png" class="medium-zoom-image" loading="lazy" src="https://image.edbiji.com/doccon/20221126/20221126232521_316512_92794.jpg" /></p>

<p><img alt="image.png" class="medium-zoom-image" loading="lazy" src="https://image.edbiji.com/doccon/20221126/20221126232521_611871_92794.jpg" /></p>

<p><img alt="image.png" class="medium-zoom-image" loading="lazy" src="https://image.edbiji.com/doccon/20221126/20221126232521_615688_92794.jpg" /></p>
</li>
<li>
<p>导入顺序不变，引入顺序改变</p>

<p><img alt="image.png" class="medium-zoom-image" loading="lazy" src="https://image.edbiji.com/doccon/20221126/20221126232521_615086_92794.jpg" /></p>

<p><img alt="image.png" class="medium-zoom-image" loading="lazy" src="https://image.edbiji.com/doccon/20221126/20221126232522_474950_92794.jpg" /></p>

<p><img alt="image.png" class="medium-zoom-image" loading="lazy" src="https://image.edbiji.com/doccon/20221126/20221126232522_602363_92794.jpg" /></p>
</li>

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

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

总结

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

作者：旺仔米苏
链接：https://juejin.cn/post/7086859150759559176
来源：稀土掘金
著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。