Vue3正式发布那么久了,你认识Pinia了吗?

这篇具有很好参考价值的文章主要介绍了Vue3正式发布那么久了,你认识Pinia了吗?。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

个人简介

👀个人主页: 前端杂货铺
🙋‍♂️学习方向: 主攻前端方向,正逐渐往全干发展
📃个人状态: 研发工程师,现效力于中国工业软件事业
🚀人生格言: 积跬步至千里,积小流成江海
🥇推荐学习:🍍前端面试宝典 🍉Vue2 🍋Vue3 🍓Vue2/3项目实战 🥝Node.js🍒Three.js 🍖JS版算法
🌕个人推广:每篇文章最下方都有加入方式,旨在交流学习&资源分享,快加入进来吧


前言(简介)

各位新朋友、老朋友们大家好,这里是前端杂货铺,欢迎各位的到来!!

Vue3 其实在 2020 年 09 月18 日 就已经正式发布了,这样看来都快 三年 的时间了。屏幕前的各位可能曾有意无意间看到过 Pinia 这个词,那么 Pinia 到底是个什么东西呢?

答:其实 Pinia 就是一个拥有 组合式 APIVue 状态管理库

  1. 组合式 API:Vue3 => 组合式 API(Composition API),Vue2 => 选项式 API(Options API)
  2. Vue 状态管理库:允许我们跨组件或页面共享状态

所以我们就可以把 Pinia 看成是 Vuex 的升级或改良版本,Vuex 更适合 Vue2,而 Pinia 更适合 Vue3

与 Vuex 相比,Pinia 不仅 提供了一个更简单的 API,也提供了 符合组合式 API 风格的 API,最重要的是,搭配 TypeScript 一起使用时 有非常可靠的类型推断支持。Pinia 还 弃用了 mutation,因为在 Vuex 中 mutation 经常被认为是个冗余的存在

哦~,原来这是 Pinia 啊,那为什么不延续之前的叫法 Vuex 呢?

答:有人说是为了尊重原作者,就以作者的名字作为状态管理库的叫法了。但我看 Pinia 官方文档,
是说 Pinia(西班牙语中表示 “菠萝”), 菠萝花实际上是一组各自独立的花朵,它们结合在一起,由此形成一个多重的水果。 与 Store 类似,每一个都是独立诞生的,但最终它们都是相互联系的

咳咳咳,大家对这个词的由来有个了解就好,这个不是那么重要…

好了各位,我的废话说的差不多了(O(∩_∩)O),接下来我们言归正传,开始真正的 Pinia 学习之旅吧~


创建 Vite + Vue + TS 项目

为什么要创建项目呢,因为我们的 Pinia 打算在单文件组件中使用,所以创建项目是个必要的步骤

在合适的位置 win + r 打开命令框

## 搭建 Vue 项目
npm create vite learn-pinia --template vue-ts

Vue3正式发布那么久了,你认识Pinia了吗?,Vue3+Pinia+TS+Vite从入门到实战,Vue3,Vite,Pinia

Vue3正式发布那么久了,你认识Pinia了吗?,Vue3+Pinia+TS+Vite从入门到实战,Vue3,Vite,Pinia

之后可以通过 VS Code 或其他编译器打开项目,在终端进行如下操作:

## 安装依赖
npm install
## 运行项目
npm run dev

在浏览器中打开终端的链接,如下图所示,就是启动成功了(喝彩一下~):

Vue3正式发布那么久了,你认识Pinia了吗?,Vue3+Pinia+TS+Vite从入门到实战,Vue3,Vite,Pinia

安装 Pinia

其实以上的操作只是创建了一个基于 Vite + Vue3 + TS 的项目,我们 还需要安装 Pinia

其实很简单,只需要终端键入以下命令,再回车即可:

npm intsall pinia

搭建 Pinia 模块

在 src 目录下新建 store 文件,在 store 文件中创建 index.ts 文件

import { createPinia } from 'pinia'

const pinia = createPinia()
export default pinia

在 main.ts 文件中进行挂载 pinia

import pinia from './store'

createApp(App).use(pinia).mount('#app')

至此,我们的架子就搭建完成了…


本篇小结

通过本篇文章,我们初步认识了 Pinia,它是一个拥有 组合式 APIVue 状态管理库,之后我们进行了对 Vite + Vue3 + TS 项目的创建,还进行了 Pinia 的安装 以及 Pinia 模块的搭建。 接下来,我们再深入认识和学习 Pinia,并利用它做一些 Demo 和 项目…


参考资料:

  1. Pinia 官方文档
  2. Pinia 教程 【作者:千锋教育】

Vue3正式发布那么久了,你认识Pinia了吗?,Vue3+Pinia+TS+Vite从入门到实战,Vue3,Vite,Pinia文章来源地址https://www.toymoban.com/news/detail-569870.html


到了这里,关于Vue3正式发布那么久了,你认识Pinia了吗?的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • vue3项目中使用pinia

    前言: 官网地址 https://pinia.vuejs.org/zh/ 中文文档 https://pinia.web3doc.top/ pinia    作为Vue.js 状态管理库 类型安全、可扩展性以及模块化设计。 甚至让你忘记正在使用的是一个状态库。 优点:   优点 dev-tools 支持 跟踪动作、突变的时间线 Store 出现在使用它们的组件中 time travel

    2023年04月26日
    浏览(45)
  • vue3组件通信之pinia

      在vue3,vue的状态管理也迎来了新的变更,在vue3使用新的组件pinia来代理原有的vuex。pinia相比vuex,功能收敛了不少,比如不直接暴露setter方式,外部直接修改数据 vuex:集中式管理状态容器,可以实现任意组件之间通信 核心概念:state、mutations、actions、getters、modules pinia:集中式

    2024年02月11日
    浏览(40)
  • Vue3---Pinia优化重复请求

    若两个组件请求的数据是相同的,避免请求两次,可以使用Pinia集中管理数据,再由父组件请求,子组件使用 1.  2. 3.

    2024年02月12日
    浏览(33)
  • vue3的pinia(大菠萝)

    一:Pinia简介和五大优势 Pinia是vue生态里Vuex的替代者,一个全新的vue状态管理库。在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia。 那先来看看Pinia比Vuex好的地方,也就是Pinia的五大优势。 可以对Vue2和Vue3做到很好的支持,也就是老项目也可以使用Pinia。 抛弃了Mutati

    2024年02月16日
    浏览(32)
  • vue3学习-Pinia状态管理

    定义一个Store 这个 name ,也称为 id ,是必要的,Pinia 使用它来将 store 连接到 devtools。 将返回的函数命名为 use… 是跨可组合项的约定,以使其符合你的使用习惯。 使用 store 一旦 store 被实例化,你就可以直接在 store 上访问 state 、 getters 和 actions 中定义的任何属性 store 是一

    2024年02月14日
    浏览(39)
  • vue3探索——pinia高阶使用

    以下是一些 Pinia 的其他高阶功能: storeToRefs() :响应式解构仓库,保证解构出来的数据是响应式的数据。 状态持久化 :Pinia 并没有内置的状态持久化功能,但你可以使用第三方库或自定义插件来实现状态的持久化。例如,你可以使用  localStorage  或  sessionStorage  来将状态

    2024年02月08日
    浏览(34)
  • Vue2向Vue3过度Vue3状态管理工具Pinia

    Pinia 是 Vue 的专属的最新状态管理库 ,是 Vuex 状态管理工具的替代品 后面在实际开发项目的时候,Pinia可以在项目创建时自动添加,现在我们初次学习,从零开始: 使用 Vite 创建一个空的 Vue3项目 按照官方文档安装 pinia 到项目中 定义store 组件使用store Pinia中的 getters 直接使

    2024年02月11日
    浏览(47)
  • pinia在vue3中的使用

    总结: 在store文件夹中建一个pinia的文件userStore.js 1.要想使用pinia必须先引入defineStore  这里我们使用es6的模块化语法导出的   import { defineStore } from \\\'pinia\\\' 2.然后使用export const useUserStore = defineStore(\\\'user\\\',{})   defineStore 方法有两个参数,第一个参数是模块化名字(也就相当于身份

    2024年02月15日
    浏览(36)
  • Vue3 store+pinia 基本使用

    pinia是一个 状态管理的库 ,用于 跨组件、页面进行状态共享 (这和Vuex、Redux一样),用起来像组合式API Pinia和Vuex有什么区别 1、PInia的最初是为了探索Vuex的下一次迭代会是什么样子,结合了Vuex核心团队讨论中的许多想法; 2、最终,团队意识到Pinia已经实现了Vuex5中大部分内

    2024年02月07日
    浏览(51)
  • VUE3浅析---pinia和proxy

    1、概念: Pinia 是 Vue3 的存储库,代替 Vuex 成为VUE3的状态管理工具。相比于 Vuex 它有以下优势: - 不存在mutations,存储数据的方式更加简化。 - 在组件上可以直接做存储库中的数据的修改,并且都是响应式的。 - 贴合ts。 2、安装并使用 2.1、安装 2.2、使用:在src目录下定义

    2024年02月11日
    浏览(34)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包