全新的 Vue3 状态管理工具：Pinia
大家好，我是若川。最近组织了源码共读活动，感兴趣的可以点此加我微信 ruochuan12 参与，每周大家一起学习200行左右的源码，共同进步。同时极力推荐订阅我写的《学习源码整体架构系列》 包含20余篇源码文章。
Vue3 发布已经有一段时间了，它采用了新的响应式系统，而且构建了一套全新的 Composition API。Vue 的周边生态都在加紧适配这套新的系统，官方的状态管理库 Vuex 也在适配中，为此官方提出了一个 Vuex 5 的全新提案。
支持两种语法创建 Store：
Options Api和Composition Api；删除
mutations，只支持state、getters、actions；模块化的设计，能很好支持代码分割；
没有嵌套的模块，只有 Store 的概念；
完整的
TypeScript支持；
在这个提案下方，有个评论很有意思。简单翻译一下：
好巧不巧，Vuex5 的提案，与 Pinia 实现的功能不能说毫无关系，只能说一模一样，今天的文章就来给大家介绍一下这个菠萝。
安装
在现有项目中，用过如下命令进行 Pinia 模块的安装。
# yarn
yarn add pinia@next
# npm
npm i pinia@next安装完成后，需要在 Vue3 项目的入口文件中，进行导入安装。
// main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'// 实例化 Vue
const app = createApp(App)
// 安装 Pinia
app.use(createPinia())
// 挂载在真实 DOM
app.mount('#app')上手
要使用 Pinia 的话，只需要定义一个 store，然后在用到该数据的地方进行导入。
定义 Store
import { defineStore } from "pinia"// 对外部暴露一个 use 方法，该方法会导出我们定义的 state
const useCounterStore = defineStore({// 每个 store 的 id 必须唯一id: 'counter',// state 表示数据源state: () => ({count: 0}),// getters 类似于 computed，可对 state 的值进行二次计算getters: {double () {// getter 中的 this 指向
全新的 Vue3 状态管理工具：Pinia相关推荐
- vue3状态管理工具 pinia的使用
vue3状态管理工具 pinia的使用 pinia 是一个轻量级的状态管理库,属于 vue3 生态圈新的成员之一,也可以把它看做 vuex5,同时支持 vue2 和 vue3,模块化的设计让它的结构十 ...
- vue3 状态管理工具 pinia 使用
1.安装pinia npm install pinia --save 2.创建 Store 新建一个 store 文件,创建 index.ts import { createPinia } from ...
- Vue新一代状态管理工具—Pinia—都2023年了，快学起来吧！
Pinia 基本介绍 Pinia 是 Vue.js 的轻量级状态管理库 官方网站:https://pinia.vuejs.org/ 中文文档: https://pinia.web3doc.top/in ...
- Vue最新状态管理工具Pinia——彻底搞懂Pinia是什么
Pinia从了解到实际运用--彻底搞懂什么是Pinia 知识回调(不懂就看这儿!) 场景复现 什么是pinia pinia相比vuex的优势 为什么要使用pinia? 基本示例 知识回调(不懂就看这儿 ...
- vue3状态管理模式 Pinia
状态管理库 Pinia是Vue的专属状态管理库,它允许你跨组件或页面共享状态 1:安装与使用pinia 1.1 安装语法:npm install pinia 1.2 创建一个pinia(根存储)并将其 ...
- Vue3状态管理库——Pinia
什么是 Pinia Pinia (西班牙语中的菠萝),本质上依然是一个状态管理的库,用于跨组件.页面进行状态共享. pinia 与 vuex 的区别: 更友好的TypeScript支持,Vuex之前对 ...
- Pinia全新一代状态管理工具Pinia-Vue3全家桶
自2022年2月7日前端Vue3成为默认版后,Vuex的状态管理地位受收到了Pinia 的挑战.我相信当你使用过Pinia之后,就会果断的抛弃Vuex的.因为Pinia确实太方便和简单了. 学习目标 ...
- 在vue项目中引用vuex状态管理工具
在vue项目中引用vuex状态管理工具 一.vuex是什么? 二.使用步骤 1.引入库 2.在main.js文件引入配置 3.配置store/index.js文件 4.获取state数据 5.获取ge ...
- [译] ⚛ React 状态管理工具博物馆
原文地址:⚛ The React State Museum: ⚡️View the hottest state management libs for React 原文作者:Gant Laborde ...
最新文章
- 如果让你拥有100万粉丝，你会做什么
- 我和奇葩的故事之失联第七天
- GitHub:一份玩转 GitHub 的秘诀，值得收藏！
- 推荐算法--利用用户标签数据(04)
- Increasing the OpLog Size in MongoDB(don't need full resync)
- jQuery 移除事件
- 420.强密码检测器
- kafka的topic管理常用命令
- js数组的多条件筛选
- 场效应管和三极管的区别
- hdu4417 Super Mario（树状数组+离线区间操作）
- 红帽Linux系统管理员学习哪些内容？
- Unity 应用的消息推送《一》本地推送
- matlab 振动信号 阀值去噪,基于MATLAB的振动信号去噪研究
- 用Python爬取新型冠状病毒肺炎实时数据，pyecharts v1.x绘制省市区疫情地图
- “上升”华为碰撞“下降”联想
- 金蝶9.1 mdac安装 question
- Linux中使用mvn命令（使用Maven：-bash：mvn：command not fonud）随笔
- 小程序不再小，已成为各大平台的必争之地
- 整理推荐 6 个超好用的平面设计网站！
热门文章