![文章顶部.png](https://p1-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/b637793da67b4e068460a99d94b333ed~tplv-k3u1fbpfcp-watermark.image?) ![大喵.png](https://p9-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/a09dc0627a954833b1abaf2e537a2d93~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=4722&h=793&s=2043295&e=png&a=1&b=f4f8fe) # 轻量状态管理工具 Pinia ![D6F5AED0-E6CA-4A0E-AF22-FEDE2F39FE7A.png](https://p3-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/67b2f6dbb51f434db968c7085bb9a220~tplv-k3u1fbpfcp-jj-mark:0:0:0:0:q75.image#?w=424&h=492&s=9464&e=jpg&b=fffefe) ## 前言作为前端开发，你肯定知道状态管理是日常开发很重要的一部分。你肯定也听过许多状态管理工具，今天我们说一下 Vue 系列的新起之秀 Pinia。 ## 什么是 Pinia Pinia 和 Vuex 一样是专门为 Vue 设计的状态管理库，它允许你跨组件或页面共享状态，Api 设计比 Vuex 更简单易学，且同时支持 Vue2.0 和 Vue3.0。 ## 安装 ``` yarn add pinia // 或者使用 npm npm install pinia ``` 创建一个 Pinia 实例 (根 Store ) 并将其传递给应用： ``` import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const pinia = createPinia() const app = createApp(App) app.use(pinia) app.mount('#app') ``` ## 如何创建 Store 在创建 Store 之前我们先简单描述一下什么是 Store Store (如 Pinia) 是一个保存状态和业务逻辑的实体，它承载着全局状态，每个组件都可以读取和写入它。它有三个概念：State、Getter 和 Action，可以想象成组件中的 `Data`、 `Computed` 和 `Methods`。创建一个 Store，在 src/stores 创建一个 counter.ts ``` // stores/counter.ts // options 模式 import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => { return { count: 0 } }, actions: { increment() { this.count++ }, }, }) // Setup 模式 import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', () => { const count = ref(0) function increment() { count.value++ } return { count, increment } }) ``` 上述代码就是创建一个 Store，DefineStore 可以随意命名，但最好保持 Use 这种风格，DefineStore 第一个参数是唯一的，不可重复，因为是应用中 Store 的唯一 ID，Pinia 将用 ID 连接 Store 和 Devtools。DefineStore 的第二个参数可以接受 Setup 函数或 Option 对象。 ## State State 的使用 ``` import { useCounterStore } from '@/stores/counter' const counter = useCounterStore() ``` 修改 State ``` // 直接修改 counter.count++ // 或者使用 $patch 修改（可以修改多个属性） counter.$patch({ count: counter.count + 1, }) ``` 重置 State ``` // 通过调用 store 的 $reset() 方法将 state 重置为初始值。 counter.$reset() ``` 解构: ``` import { useCounterStore } from '@/stores/counter' const counter = useCounterStore() const {count} = counter ``` State 也可以使用解构，但是解构会失去响应式，需要 StoreToRefs 避免丢失响应式 ``` import { storeToRefs } from 'pinia' const counter = useCounterStore() const {count} = storeToRefs(counter) ``` ## Getter Getter 完全等同于 Store 的 State 的计算属性。写法也类似，可以使用 this 访问整个 Store 的实例，甚至可以访问其他 Store 的 Getter，而且可以和 Vue 一样返回一个函数接受参数（但是这样 Getter 将不再被缓存，只是个被调用的函数），使用同 State 访问模式一样。 ``` import { useOtherStore } from './other-store' export const useCounterStore = defineStore('counter', { state: () => { return { count: 0 } }, getters: { // 使用 state 可以自动推到出类型 doubleCount(state) { return state.count * 2 }, // 返回类型必须明确设置 doublePlusOne(): number { return this.doubleCount + 1 }, //还可以访问其他 getter otherGetter(state) { const otherStore = useOtherStore() return state.count + otherStore.count }, }, actions: { increment() { this.count++ }, }, }) ``` ## Action Action 相当于组件中的 Methods，类似 Getter，Action 也可通过 this 访问整个 Store 的实例 Action 也可以是异步的，还可以访问其他Store 的 Action。 ``` import { useAuthStore } from './user' export const useCounterStore = defineStore('counter', { state: () => { return { userInfo: {} } }, actions: { async fetchUserInfo() { const auth = useAuthStore() if (auth.isAuthenticated) { this.userInfo = await fetchUserInfo() } }, }, }) ``` 调用 ``` ``` ## 总结以上就是 Pinia 的基本使用。回顾以前使用的 Vuex 是不是 Api 是不是非常简洁，Pinia 抛弃了 Mutation 和 Module，只保留State、Getter 和 Action，而且使用方法和组件中 `Data`、 `Computed` 和 `Methods` 类似，上手零成本。而且支持 ts，极致轻量化代码只有1kb左右。 ## 参考链接 ## 推荐阅读 [Cola-StateMachine状态机的实战使用](https://juejin.cn/post/7290727062145499175) [Redisson杂谈](https://juejin.cn/post/7288607047573422140) [react-grid-layout 之核心代码分析与实践](https://juejin.cn/post/7288229413036048442) [@Transactional注解使用以及事务失效的场景](https://juejin.cn/post/7283348301252542521) [REDIS 数据结构与对象](https://juejin.cn/post/7283151314023317561) ## 开源作品 * 政采云前端小报 **开源地址 [www.zoo.team/openweekly/](http://zoo.zhengcaiyun.cn/)** (小报官网首页有微信交流群) * 商品选择 sku 插件 **开源地址 [https://github.com/zcy-inc/skuPathFinder-back/](https://github.com/zcy-inc/skuPathFinder-back)** ## 招贤纳士政采云技术团队（Zero），Base 杭州，一个富有激情和技术匠心精神的成长型团队。规模 500 人左右，在日常业务开发之外，还分别在云原生、区块链、人工智能、低代码平台、中间件、大数据、物料体系、工程平台、性能体验、可视化等领域进行技术探索和实践，推动并落地了一系列的内部技术产品，持续探索技术的新边界。此外，团队还纷纷投身社区建设，目前已经是 google flutter、scikit-learn、Apache Dubbo、Apache Rocketmq、Apache Pulsar、CNCF Dapr、Apache DolphinScheduler、alibaba Seata 等众多优秀开源社区的贡献者。如果你想改变一直被事折腾，希望开始折腾事；如果你想改变一直被告诫需要多些想法，却无从破局；如果你想改变你有能力去做成那个结果，却不需要你；如果你想改变你想做成的事需要一个团队去支撑，但没你带人的位置；如果你想改变本来悟性不错，但总是有那一层窗户纸的模糊……如果你相信相信的力量，相信平凡人能成就非凡事，相信能遇到更好的自己。如果你希望参与到随着业务腾飞的过程，亲手推动一个有着深入的业务理解、完善的技术体系、技术创造价值、影响力外溢的技术团队的成长过程，我觉得我们该聊聊。任何时间，等着你写点什么，发给 ![底图-v3.png](https://p6-juejin.byteimg.com/tos-cn-i-k3u1fbpfcp/63372e91db394c669ccda1e8c6d913db~tplv-k3u1fbpfcp-watermark.image?)