前言
上一篇文章我们大体的介绍了一下 Pinia 的基本信息和基本概念，相信大多数小伙伴都对这个概念有了一个基本的认识。
接下来我们重点学习 Pinia中的一个重要概念 State。如果您之前使用过 Vuex的话，那么对 State 肯定不会陌生，它是所有状态的载体容器，也可以这样说，其它的所有的概念也是围绕着 State 去服务，所以它的重要程度不言而只喻。
看一下 Pinia官网对 State 的基本介绍吧：（个人翻译而来）
"大多数的时候，State 是 Store的中心部分，在应用中我们经常以定义一个State开始着手。在 Pinia里面，State被定义成是一个返回初始状态的函数。
这样服务端和客户端就都可以使用。"
定义
从上面的信息中我们要知道一个重点就是 State 要被定义成一个函数类型，且要返回一个初始状态的对象。这个地方和 Vue 中的 data 属性一样。
import { defineStore } from 'pinia' const useStore = defineStore('storeId', { // 为了所有的类型推断建议使用箭头函数 state: () => { return { // 下面的属性会被自动推断出类型 counter: 0, name: 'Eduardo', isAdmin: true, } }, }
以上就是简单的定义一个 State
使用
上面我们定义好了一个State，接下来就是如何使用了。
通常情况下我们可以直接对 State的属性进行 `读` 和 `写` 操作
const store = useStore() store.counter++
除了可以对某个属性进行修改之外，Pinia 还允许我们使用`$patch` 方法进行批量操作属性。用过 react 的同学，对这种操作方式应该不陌生。
store.$patch({ counter: store.counter + 1, name: 'Abalam', })
当然，凡事有例外，如果我们需要对一个数组进行 push、splice等操作。这样做就会非常的复杂且开销很大。所以，`$patch` 也允许我们传入一个函数类型的参数来方便处理这种复杂的场景
cartStore.$patch((state) => { state.items.push({ name: 'shoes', quantity: 1 }) state.hasChanged = true })
以上就是对 State 的基本的使用。也是我们平时开发中经常使用的方式，与此同时 Pinia还给我们提供了很多好用的 api 来操作 State 。
个人感觉 Pinia 比 Vuex 真的是方便很多。
其它使用方式
- 使用 option api（mapState）的方式获取属性，个人感觉这种方式不太直观，个人并不推荐这种方式，当然在某些场景下这种方式还是挺有用的，所以这种方式作为了解就好。用法和Vuex 中的 mapGetter 类似
- 重置 State。有的时候我们想要恢复 State数据到最初的状态，就可以使用 Pinia 提供的 `$reset` api进行操作
const store = useStore() store.$reset()
- 替换 State。个人感觉 Pinia 对 State 真是做了大量的工作，和重置State类似。Pinia 允许我们直接对 State进行替换。当然我们并不推荐使用这种方式，因为这会让我们的状态很难追踪。
store.$state = { counter: 666, name: 'Paimon' }
- 监听 State的状态变化，主要是使用 $subscribe 方法进行操作，接收一个回调函数，当状态有变化时就会回调函数。在某些场景下还是挺有用的。当然我们也可以使用 Vue中的watch来监听状态变化
总结
上面林林总总介绍了 State 的基本概念和用法，大家要掌握如何定义和使用State。对于State的一些高级用法，要了解，在某些场景下会比较好用。
好啦~ 对于 State 就先介绍这么多。
接下来文章就是 getters 和 actions的用法的讲解了
