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

Nuxt3-学习之路 17，修改useState中的状态共享值

引言

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

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

问题

首先感谢这位掘友，看到掘友在Nuxt3-学习之路 14，状态共享-useState提出的问题。如果想要修改 useState 里面定义的值，这里应该如何写，如何处理呢？

我看到自己对 useState 的使用，学习和讲述的比较简单。

我这里也重新回顾学习一下，并在这里进行补充，如何修改 useState 定义的值。

修改状态共享值-useState

这里主要分两种情况

一种是只定义数据，然后暴露出去。然后在不同的 .vue文件 上写不同的逻辑方法，来对这个数据进行处理。
另一种同时定义数据和方法，然后一起暴露出去，不同的 .vue文件 调用同一种方法名来处理。

只定义数据

我们在 composables 目录下创建文件 useModifyFoo.ts，添加两个导出方法，一个是对基本数据类型处理，另一种对引用数据类型进行处理。

export const useModifyStringFoo = () => {
  const modifyStringFoo = useState('modifyStringFoo', () => '')
  return {
    modifyStringFoo
  }
}

export const useModifyArrayFoo = () => {
  const modifyArrayFoo = useState('modifyArrayFoo', () => [])
  return {
    modifyArrayFoo
  }
}

之后我们在 components 目录下，创建两个组件，分别为 MyModify.vue，以及MyModify2.vue ，注意这两个里面的代码是一样的。

之后在根路由中进行组件的一个引入，来进行使用。

此时的页面展现为

下面进行点击测试，尝试改变 modifyStringFoo 和 modifyArrayFoo 的值，查看是否两个组件都会进行改变。

通过gif图可知，我们在不同的组件中修改后，数据是共同变化的。

定义数据和方法

定义数据和方法，我们在刚刚定义的 useModifyFoo.ts 文件中，修改文件内容

export const useModifyStringFoo = () => {
  const modifyStringFoo = useState('modifyStringFoo', () => '')
  const modifyStringFooFunc = () => {
    modifyStringFoo.value += modifyStringFoo.value.length
  }
  return {
    modifyStringFoo,
    modifyStringFooFunc
  }
}

export const useModifyArrayFoo = () => {
  const modifyArrayFoo = useState('modifyArrayFoo', () => [])
  const modifyArrayFooFunc = () => {
    modifyArrayFoo.value.push(modifyArrayFoo.value.length)
  }
  return {
    modifyArrayFoo,
    modifyArrayFooFunc
  }
}

修改 MyModify.vue 和 MyModify2.vue 这两个组件文件为下图所示，

刷新页面，得到的效果如上图 gif 效果一样。

这种方法的好处，可以在我们导出的时候，不必直接操作变量本身，直接调取方法内部，通过方法内部来控制变量。

如果想外界彻底不操作变量，就要使用方法来控制，那么可以在导出的时候，加上 readonly 关键词，如下图，来保证了我们的数据安全性。

总结

学习了 Nuxt3 中，如何修改 useState 中的状态共享值，两种方法提供使用，以及 readonly 关键词，保护变量。