共计 1910 个字符，预计需要花费 5 分钟才能阅读完成。
为什么采纳 Pinia ?
因为 vuex 4 对 typescript 的反对让人感到惆怅，所以状态治理弃用了 vuex 而采取了 pinia，说一下采纳 Pinia 的 5 个重要条件：
- Pinia 的 API 设计十分靠近
Vuex 5的提案。（作者是 Vue 外围团队成员） - 无需像
Vuex 4自定义简单的类型来反对 typescript，天生具备完满的类型推断。 - 模块化设计，你引入的每一个 store 在打包时都能够主动拆分他们。
- 无嵌套构造，但你能够在任意的 store 之间穿插组合应用。
- Pinia 与 Vue devtools 挂钩，不会影响 Vue 3 开发体验。
上面简略的介绍一下如何应用 Pinia，并比照 vuex 有哪些区别与注意事项，具体请参考官网文档。
Store
在深入研究外围概念之前，咱们须要晓得脚手架内置了哪些 Store 和如何自定义创立 Store。
内置 Store
| Store | 阐明 | API |
|---|---|---|
| useUserStore | 用户登录与信息管理 | 详情 |
| useMenuStore | 路由 & 菜单治理 | 详情 |
| useLogStore | 日志治理 | 详情 |
创立 Store
Pinia 曾经内置在脚手架中，并且与 vue 曾经做好了关联，你能够在任何地位创立一个 store：
import {defineStore} from 'pinia'
export const useUserStore = defineStore({
id: 'user',
state: () =>({}),
getters: {},
actions: {}})
复制代码这与 Vuex 有很大不同，它是规范的 Javascript 模块导出，这种形式也让开发人员和你的 IDE 更加分明 store 来自哪里。
Pinia 与 Vuex 的区别
- id 是必要的，它将所应用 store 连贯到 devtools。
- 创立形式：
new Vuex.Store(...)(vuex3)，createStore(...)(vuex4)。 - 比照于 vuex3，state 当初是一个 函数返回对象。
- 没有 mutations，不必放心，state 的变动仍然记录在 devtools 中。
State
增加属性
创立好 store 之后，能够在 state 中创立一些属性了，
state: () => ({ name: 'codexu', age: 18})
复制代码将 store 中的 state 属性设置为一个函数，该函数返回一个蕴含不同状态值的对象，这与咱们在组件中定义数据的形式十分类似。
在模板中应用 store
当初咱们想从 store 中获取到 name 的状态，咱们只须要应用以下的形式即可：
<h1>{{userStore.name}}</h1>
const userStore = useUserStore()
return {userStore}
复制代码留神这里并不需要 userStore.state.name。
尽管下面的写法很舒服，然而你肯定不要用解构的形式去提取它外部的值，这样做的话，会失去它的响应式：
const {name, email} = useUserStore()
复制代码Getters
Pinia 中的 getter 与 Vuex 中的 getter、组件中的计算属性具备雷同的性能，传统的函数申明应用 this 代替了 state 的传参办法，但箭头函数还是要应用函数的第一个参数来获取 state，因为箭头函数解决 this 的作用范畴：
getters: {nameLength() {return this.name.length},
nameLength: state => state.name.length,
nameLength: ()=> this.name.length ❌}
复制代码Actions
这里与 Vuex 有极大的不同，Pinia 仅提供了一种办法来定义如何更改状态的规定，放弃 mutations 只依附 Actions，这是一项重大的扭转。
Pinia 让 Actions 更加的灵便
- 能够通过 组件 或其余 action 调用
- 能够从 其余 store 的 action 中调用
- 间接在商店实例上调用
- 反对 同步 或异步
- 有任意数量的参数
- 能够蕴含无关如何更改状态的逻辑（也就是 vuex 的 mutations 的作用）
- 能够
$patch办法间接更改状态属性
actions: {async insertPost(data){await doAjaxRequest(data);
this.name = '...';
}
}
复制代码Devtools
脚手架已内置上面的代码，这将增加 devtools 反对：
import {createPinia, PiniaPlugin} from 'pinia'
Vue.use(PiniaPlugin)
const pinia = createPinia()
复制代码在 Vue 3 中，依然不反对工夫旅行和编辑等一些性能，因为 vue-devtools 还没有公开必要的 API。
