Pinia，vuejs的官方状态库，由vuejs团队成员 eduardo san moartin 开发的一个新的状态管理工具，我来为大家讲解一下关于popping怎么自学?跟着小编一起来看一看吧!
popping怎么自学
Pinia，一个更简洁的 vuejs 状态管理工具Pinia，vuejs的官方状态库，由vuejs团队成员 eduardo san moartin 开发的一个新的状态管理工具。
实际上 Pinia 就是 Vuex5.0。
pinia 同时支持 vue2 和 vue3，下文以 vue3 为例。
安装和配置yarn add pinia@next# ornpm install pinia@next
在工程的入口文件配置 pinia
// main.jsimport { createPinia } from 'pinia// ...createApp(App).use(createPinia()).mount('#app')
现在，准备工作已经就绪。
定义 Storepinia 和 vuex 的定义方式不太一样。在 vuex 中，虽然可以拆分不同的module，但是整个应用程序只有一个主要的store对象。而pinia是开箱即用的模块化设计，没有像vuex那样的单一store对象，而是给每个store设置唯一的命名空间。下面，让我们来试试创建一个【登录用户】的store对象。
import { defineStore } from 'piniaexport const useLoggedInUserSotre = defineStore({ // id 是必需的，类似 vuex 中为每个module设置namespaced，该id名称会显示在vue devtools中 id: 'loggedInUser', State: () => ({}), getters: {}, actions: {}})
接下来，在组件中使用这个 store。
<script> import { useLoggedInUserStore } from '@/store/loggedInUser' export default { setup() { const user = useLoggedInUserStore() } }</script>
这和 vuex 的使用方式有很大的不同，vuex 通过其api，将store和组件进行连接，而pinia，是以es module的方式import到组件内，这让我们更加清楚store来自那里，可读性更高。
State配置好store后，我们就可以定义状态了，在pinia中定义state数据很简单，和我们在组件中定义data数据的方式类似。pinia中的state是一个函数，该函数返回一个包括不同类型数据的对象。这和vue组件中的data函数非常相似，唯一的却别就是函数的名称不同：state vs data。
// store/loggedInUser.jsstate: ()=>({ name: 'John Doe', email: 'fake@email.com', username: 'jd123'})
在组件中访问state时，只需要访问创建的user对象的属性即可，无需再像vuex那样，要先在 computed 中的使用扩展运算符处理state，还得通过state.namespaced.xxx的方式来访问状态，pinia的使用方式对开发者来说，非常友好。
<template> <h1> hello, {{user.name}}</h1></template><script> import { useLoggedInUserStore } from '@/store/loggedInUser' export default { setup() { const user = useLoggedInUserStore()const name = user.name return { user, name } } }</script>
我们在使用 vuex 时，会将 store 用 computed 处理，使数据具有响应式属性，当 store 数据变化的，组件内对 store 的引用才会有相应的变化。那么对于 pinia 来说也是一样的。不管是 state 还是 getters 都需要 computed 来监听变化。
<template> <h1> hello, {{user.name}}</h1></template><script> import { computed } from 'vue' import { useLoggedInUserStore } from '@/store/loggedInUser' export default { setup() { const user = useLoggedInUserStore() // 使用 computed 让数据具有响应式const name = computed(() => user.name) return { user, name } } }</script>
需要注意的是，在使用store时，如果进行了解构，这将会使属性失去其响应式。
// 解构后，属性不再具有响应式const { name, email } = useLoggedInUserStore()
最后，如果使用options API(在vue3中，这应该是比较少见的情况)，你可以通过mapState来使用store，但这和vuex也有一些不同，第一个参数为要获取的store，第二个参数为要获取的state属性。
//AppComponent.vue<template> <h1>Hello, my name is {{name}}</h1></template><script>import {mapState} from 'pinia'import { useLoggedInUserStore } from '@/store/loggedInUser export default{ computed:{ ...mapState(useLoggedInUserStore, ['name']) }}</script>
Pinia 中的 getter 与 vuex 中的 getter 、组件中的 computed 属性具有相同的用途。 在 getter 中可以通过2种方式来访问state。
第一种方式是通过 this 关键字，在函数声明或者对象的方法属性中都可以通过 this 正常访问到 state，但是，不能使用箭头函数，因为箭头函数没有自己的 this 。
import { defineStore } from 'pinia'export const usePostsStore = defineStore({ id: 'PostsStore', state: () => ({ posts: ['post1', 'post2'] }), getters: { postsCount: function () { return this.posts.length }, // 方法的简洁表示法 postsCount () { return this.posts.length }, // 错误：不能使用箭头函数 postsCount: () => this.posts.length }})
第二种方式是通过getter 方法中的 state 参数来访问状态，在这种方式下，可以在getter中使用箭头函数。
import { defineStore } from 'pinia'export const usePostsStore = defineStore({ //... getters:{ // 箭头函数 postsCount: state => state.posts.length, }})
此外，getters属性直接的互相访问，可以使用 this ，但同样不能用箭头函数。
import { defineStore } from 'pinia'export const usePostsStore = defineStore({ //... getters:{ postsCount: state => state.posts.length, // 通过 this 访问到其他的 getters 方法，但不能使用箭头函数 postsCountMessage(){ return `${this.postsCount} posts available` } }})
在组件中访问getters时，和访问state状态一样，无需再通过额外的getters对象。
<template> <p>{{postsCount}} posts available</p></template><script>import { usePostsStore } from "@/store/PostsStore";export default { setup() { const PostsStore = usePostsStore(); return { postsCount: PostsStore.postsCount }; }};</script>
同样的，如果使用options API，可以通过computed来访问。
<template> <p>{{postsCount}} posts available</p></template><script>import { mapState } from 'pinia'import { usePostsStore } from "@/store/PostsStore";export default { computed:{ ...mapState(usePostsStore, ['postsCount']) }};</script>
和 vuex 不同，pinia 仅能通过 actions 来改变状态，没有 mutations。
下面来看看关于actions的一些特性和最佳实践：
可以在组件中直接调用actions 之间可以互相调用可以直接在 store 实例上调用(不需要 dispatch 方法)可以是异步或同步方法可以有任意数量的参数可以在actions中更改state可以通过this访问属性名来更改state属性，或者使用$patch批量更改state属性。import { defineStore } from 'pinia'export const usePostsStore = defineStore({ id: 'PostsStore', state: ()=>({ posts: ['post 1', 'post 2', 'post 3', 'post 4'], user: { postsCount: 2 }, errors: [] }), getters:{ postsCount: state => state.posts.length, }, actions:{ async insertPost(post){ try { await doAjaxRequest(post) // 修改多个 state 状态 this.posts.push(post) this.user.postsCount // 或者使用 $patch this.$patch((state) => { state.posts.push(post) state.user.postsCount }) }catch(error){ this.errors.push(error) } } }})
定义 actions 后，在组件中可以像state 或者 getter 一样，直接访问到 actions。
<template> <input type="text" v-model="post" /> <button @click="insertPost(post)">Save</button></template><script>import { usePostsStore } from '@/store/PostsStore';export default{ data(){ return { post: '' } }, setup(){ const PostsStore = usePostsStore() return { insertPost: PostsStore.insertPost } },}</script>
如果使用 options API，需要通过 mapActions 来访问actions。
<template> <input type="text" v-model="post" /> <button @click="insertPost(post)">Save</button></template><script>import {mapActions} from 'pinia'import { usePostsStore } from '@/store/PostsStore';export default{ data(){ return { post: '' } }, methods:{ ...mapActions(usePostsStore, ['insertPost']) }}</script>
pinia 本身是模块化，不需要像 vuex 那样拆分模块后再组合在一起，在创建一个store module的时候，就可以直接在组件中引用，也不需要挂载在 vue 实例上。
模块之间如何互相访问呢？这和在组件中使用类似。
store/posts.js
import { defineStore } from 'pinia'export const usePostsStore = defineStore({ id: 'PostsStore', state: ()=>({ posts: ['post 1', 'post 2', 'post 3', 'post 4'], user: { postsCount: 2 }, errors: [] }), getters:{ // 通过 this 访问到其他的 getters 方法，但不能使用箭头函数 postsCountMessage(){ return `${this.postsCount} posts available` } }})
store/loggedInUser.js
在 loggedInUser 中访问 posts store。
import { defineStore } from 'pinia// 在 loggedInUser 中引入 postsimport { usePostsStore } from './posts'export const useLoggedInUserSotre = defineStore({ id: 'loggedInUser', state: () => ({}), getters: {}, actions: { add () { // 在 actions 中访问其他 store，在 getters 中类似 // 创建 store 实例 const PostsStore = usePostsStore() // 打印出 posts 的长度 console.log(PostsStore.posts.length) },})
我们时常需要在 devtools 中调试状态，在 vue2 中，可以在 devtools 的 vuex 面板查看到 pinia 的状态。
而在 vue3 中，安装新版 devtools后，可以切换到pinia面板查看状态，但目前还不支持时间旅行功能(还未看到官方消息，有看到官方公布的，可以贴个链接)。
总结让我们来快速回顾一下 Pinia 的特性，以帮助你更好的选择项目的状态管理工具。
由 vuejs 团队核心成员开发和维护使用上更接近 es module 的方式不需要额外的 mutations集成 vue devtoolsVue3 官方文档中后续的状态管理工具会以 Pinia 为主vue devtools 目前还不支持 vue3 的时间旅行完整的 typescript 支持支持同步和异步的actions模块化设计，自动的代码拆分由于pinia在去年年初才开始引起广泛关注，目前的社区力量相对vuex还比较小，stack overflow 上相关的讨论也不如vuex。
但截止目前(2021-12-24)，pinia 已经发布了 v2 版，且在稳定迭代中，社区也在快速增长中，也成为了vuejs的官方状态管理库，希望后续会出现更多的解决方案。
pinia 是轻量级，体积小，适合中小型、低复杂度的项目，对于大型、复杂度高的项目，vuex更适合，也更稳定。
