前言
相信在Vue中提到状态管理，大家一定会想到 Vuex。的确 Vuex确实是比较强大的，但Vuex 多少有点重，而且对 Typescript的支持也不是那么的友好，同时门槛也比较高，学习成本比较大。
基于以上种种原因，随着 Pinia 的不断完善 也渐渐的进入到小伙伴的视野中，今天就同大家一起学习一下 Pinia 的优美之处。
Pinia 始于 2019年11月， 让人比较心动的事，Pinia 同时支持 Vue2 和 Vue3 这一点可以说是很良心的。当然，由于VueAdminWork中Vue3的版本比较多，我们下面只介绍一下在 Vue3 中的用法。
和 Vuex 差不多的事，Pinia 的 store 也同样有 `state` `actions` `getters` 的这些概念，但比 Vuex 更加简洁的是没有 `mutations`，这一点个人觉得很赞。
关于 pinia 打算分以下几个篇章讲一下
- 学习篇
- state篇
- getters篇
- actions篇
- 持久化篇
- 源码解析篇
基本概念
- 引入并使用pinia
引入
yarn add pinia # or with npm npm install pinia
使用（Vue3中的用法）
import { createPinia } from 'pinia' app.use(createPinia())
- store
定义一个 store 很简单
import { defineStore } from 'pinia' export const useStore = defineStore('main', { state: () => { return {} }, actions: {}, getters: {} })
这里注意的是 第一个参数是必须要有的，并且是独一无二的，这将是一个 store 的唯一标识。
使用起来也比较方便
import { useStore } from '@/stores/counter' export default { setup() { const store = useStore() return { store, } }, }
- state
pinia 中的 state 也比较好理解，但有一点值得注意的是，state 需要是一个 函数 的类型，而且要返回一个 初始对象，这类似于Vue中 data() 方法。
import { defineStore } from 'pinia' const useStore = defineStore('storeId', { state: () => { return { counter: 0, name: 'Eduardo', isAdmin: true, } }, })
访问 state中的属性，用法比较简单
const store = useStore() store.counter++
重置 state
const store = useStore() store.$reset()
和Vuex一样，pinia 同样也提供了 mapXXX 函数方便大家使用，在这里就不过多介绍了，感兴趣的同学可以去官网查看。
state 还有其它更加高级的用法，这篇文章先不介绍那么多了，下一篇具体看个例子介绍。
- actions
按官网的介绍：actions 等于 组件中的 methods ，里面可以定义很多业务逻辑的方法。
export const useStore = defineStore('main', { state: () => ({ counter: 0, }), actions: { increment() { this.counter++ }, randomizeCounter() { this.counter = Math.round(100 * Math.random()) }, }, })
但有一个地方非常点赞的是，actions里面的方法支持 异步。
actions: { async registerUser(login, password) { try { this.userData = await api.post({ login, password }) showTooltip(`Welcome back ${this.userData.name}!`) } catch (error) { showTooltip(error) // let the form component display the error return error } }, }
使用起来也比较方便
export default defineComponent({ setup() { const main = useMainStore() main.randomizeCounter() return {} }, })
- getters
getters 等于 组件中 computed ，用法也很简单
export const useStore = defineStore('main', { state: () => ({ counter: 0, }), getters: { doubleCount: (state) => state.counter * 2, }, })
用起来和 computed 里面的属性一样：
<template> <p>Double count is {{ store.doubleCount }}</p> </template> <script> export default { setup() { const store = useStore() return { store } }, } </script>
以上便是对 pinia 的几个重要概念简单介绍，比较简单，大家先入门，后面我们一步步认识 pinia
