快速入门Pinia状态管理库

更新日期: 2021-10-23阅读: 1.4k标签: Pinia

Pinia 是一个用于 vue 的状态治理库,相似 Vuex, 是 Vue 的另一种状态治理计划。如果你现在使用 vue3 开发项目,那么推荐你使用 Pinia 开发。

Pinia的优点

1、完整的 TypeScript 支持:与在 Vuex 中添加 TypeScript 相比,添加 TypeScript 更容易。

2、极其轻巧(体积约 1KB)

3、store 的 action 被调度为常规的函数调用,而不是使用 dispatch 方法或 MapAction 辅助函数,这在 Vuex 中很常见。

4、支持多个Store,Pinia 不支持嵌套存储。相反,它允许你根据需要创建 store。但是,store 仍然可以通过在另一个 store 中导入和使用 store 来隐式嵌套。

5、支持 Vue devtools、SSR 和 webpack 代码拆分


快速开始

npm install pinia

创建一个 pinia 作为 root store 添加到 app 中。

import { createApp } from 'vue'import { createPinia } from 'pinia'
const app = createApp({})app.use(createPinia())

开始定义 store

export const useStore = defineStore('main', {
state: () => ({
counter: 0,
}),
getters: {
doubleCount: (state) => state.counter * 2,
},
actions: {
increment() {
this.counter++
},
randomizeCounter() {
this.counter = Math.round(100 * Math.random())
},
},
})

在组件中使用 store 。

<template>
<div>
{{store.count}}
</div>
</template>

<script>
import { useStore } from '@/stores/counter'

export default {
setup() {
const store = useStore()

return {
// 可以返回 store 实例在模板中使用
store,
}
},
}
</script>

同样也支持之前的辅助函数。可以使用 mapState 来映射我们 store 中的 state 和 getter。也可以使用 mapActions 来映射 action 函数。

import { mapState } from 'pinia'

export default {
computed: {
..mapState(useStore, ['counter', 'doubleCount'])
},
methods: {
...mapActions(useStore, ['increment'])
...mapActions(useStore, { myOwnName: 'randomizeCounter' }),
},
}

Pinia 相比 Vuex 更加简略,而且 Pinia 能够自在扩大。

Pinia 是合乎直觉的状态治理形式,让使用者回到了模块导入导出的原始状态,使状态的起源更加清晰可见。

Pinia 的应用感触相似于 Recoil,但没有那么多的概念和 api,主体十分精简,极易上手(Recoil 是 Facebook 官网出品的用于 react 状态治理库,应用 React Hooks 治理状态)。

而且 Pinia 适用于 Vue 2 和 Vue 3,并且不要求您使用 composition API。

链接: https://www.fly63.com/article/detial/10803

Pinia被鼓吹的setup写法真的好用吗

引用官方的一句话:Pinia是一个符合直觉的 Vue.js 状态管理库。简单说几点它的特性:它支持Vue3,同时也支持Vue2,是Vuex的完美过渡替代者

Pinia是Vuex的良好替代品吗?

Pinia 是 Vue.js 的轻量级状态管理库,最近很受欢迎。它使用 Vue 3 中的新反应系统来构建一个直观且完全类型化的状态管理库。

全新的 Vue3 状态管理工具:Pinia

Vue3 发布已经有一段时间了,它采用了新的响应式系统,而且构建了一套全新的 Composition API。Vue 的周边生态都在加紧适配这套新的系统,官方的状态管理库 Vuex 也在适配中

Vue新一代状态管理插件Pinia

如果你之前使用过 vuex 进行状态管理的话,那么 pinia 就是一个类似的插件。它是最新一代的轻量级状态管理插件。按照尤雨溪的说法,vuex 将不再接收新的功能,建议将 Pinia 用于新的项目。

测试一下Pinia,Vuex 要出局了?

自从我开始使用Vue 3和组合API以来,我也尝试使用 Pinea 作为状态管理库。如果是从是 vue2 和 vuex 过来的,就会觉得用起来差别还是很大的。

一文解析 Pinia 和 Vuex ,带你全面理解这两个 Vue 状态管理模式

Pinia和Vuex一样都是是vue的全局状态管理器。其实Pinia就是Vuex5,只不过为了尊重原作者的贡献就沿用了这个看起来很甜的名字Pinia。本文将通过Vue3的形式对两者的不同实现方式进行对比,让你在以后工作中无论使用到Pinia还是Vuex的时候都能够游刃有余。

我使用 Pinia 的 5 大技巧

在这篇文章中,想与大家分享使用 Pinia 的五大技巧。以下是简要总结:不要创建无用的 getter,在 Option Stores 中使用组合式函数(composables),对于复杂的组合式函数,使用 Setup Stores

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!