Pinia知识点（vue3版本）

已于 2023-02-02 19:43:24 修改
阅读量1.3k 收藏 1
点赞数
文章标签： 前端 typescript javascript Powered by 金山文档
于 2023-02-02 19:42:19 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/wdx1641670284/article/details/128852018
版权

    • 为什么要使用 Pinia？

  • Pinia 是 Vue 的存储库，它允许您跨组件/页面共享状态。

  • Pinia的好处：

1.dev-tools支持
跟踪动作，突变的时间线
Store出现在使用他们的组件中
time travel 和 更容易的调试
2.热模块更换
在不重新加载页面的情况下修改您的 Store
在开发时保持任何现有状态
3.插件
使用插件扩展 Pinia 功能
4.为 JS 用户提供适当的 TypeScript 支持或 autocompletion
5.服务器端渲染支持

    • 与Vuex的比较

    • 与Vuex相比，pinia提供了更简单的API，更少的规范，提供了 Composition-API 风格的 API，最重要的是，在与 TypeScript 一起使用时具有可靠的类型推断支持。

    • mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。

    • 与 Vuex 3.x/4.x 的比较

    • mutations 不再存在。他们经常被认为是 非常 冗长。他们最初带来了 devtools 集成，但这不再是问题。
    • 不再需要注入、导入函数、调用函数

    • 安装Pinia

    • 安装：npm i pinia
    • 创建pinia（根存储）并且全局都能使用
import { createPinia } from &#
最低0.47元/天 解锁文章
文丁响
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 1
    评论
vite-vue-ts精简模版集成pinia+svg+router+@src
03-22
【描述】提到的关键知识点包括： 1. **Vite**：由Vue.js作者尤雨溪开发的新型前端构建工具，以其快速的热模块替换（HMR）和原生ES模块支持而闻名。Vite利用浏览器原生的ES模块导入功能，大大提高了开发时的构建速度...
Vue3 —— Pinia 的学习指南以及案例分享
Bonsoir777的博客
12-09 3446
本文主要介绍pinia的使用方法
Vue3-Pinia（大菠萝）附源码
A的博客
06-03 1286
Pinia 是 Vue 的存储库，允许跨组件/页面共享状态。它实际上可以被视为 Vuex 的升级版，但为了尊重原作者，所以命名为 Pinia 而不是 Vuex。起源：Pinia 是 Vue 3 官方推荐的状态管理库，旨在提供一个更加简单和灵活的 API，同时保留 Vuex 的主要功能。
vue3+ts+pinia+vite知识分享
weixin_45803033的博客
06-13 702
在中 声明emit，必须使用API，这也是一个宏命令。同样可采用普通写法和类型声明式，在类型声明下emit将具备完美的类型推断。counter?emit('handleClick' , props . counter + 1) } < / script > < template > < div > < button @ click = "handlerClick" > 点了 {props . counter } } 次 < / button > < / div > < / template >?
Vue3之Pinia 快速入门
m0_63831957的博客
03-15 408
Pinia 是 Vue 的专属状态管理库，它允许你跨组件或页面共享状态，类似 Vuex, 是 Vue 的另一种状态管理方案，支持 Vue2 和 Vue3。Pinia 相比 Vuex 的知识点更少也更简单，而且 Pinia 可以自由扩展，使用起来也更加方便。
Vue3.2+Pinia+VueRouter+Vite+TS环境搭建及知识点学习
qq_42717015的博客
01-12 871
Vue3+vue-router+Vite+TS环境搭建及笔记
Vue3 核心知识点之 - Pinia
qq_61723274的博客
03-20 687
/ 导入 useStorage 函数// ref变量 → state 属性// 使用 useStorage(存储名称, 初始值, 存储方式)// 存储方式不给默认是localStorage// computed计算属性 → getters});// function函数 → actions});
Vue.js 状态管理：Pinia 与 Vuex
热门推荐
努力是为了站在万人之中，成为别人的光
02-08 1万+
我将简要总结 Vuex 和 Pinia。如果你想要更详尽的解释，我建议阅读Vuex 文档和Pinia 文档。Pinia是一个新的状态管理库，可帮助你在 Vue.js 应用程序中跨组件管理和存储响应数据和状态。Pinia 由 Vue 核心团队成员之一 Eduardo San Martin Morote 创建。Pinia 使用新的反应系统来构建一个直观且完全类型化的状态管理系统。库中引入的新特性是促成 Pinia 推荐的因素之一。总体而言，Pinia 显得轻巧、简单且易于掌握。
Vue3+TypeScript+pinia
qq_42048638的博客
03-03 532
VueUse文档 二、Reactive 三、To系列 四、Computed,Watch,WatchEffect computed watch watchEffect 五、父子组件传值 在使用 defineProps、defineEmits、defineExpose、withDefaults 编译器宏 ESLint报错 ‘defineEmits’ is not defined.(no-undef) 先检查ESlint版本 父组件 子组件 六、递归组件，动态组件，异步组件 递归组件 动态组件 异步组件
Vue3 面试必备高频知识点
前端知识分享喵
05-23 625
自定义指令主要是为了重用涉及普通元素的底层 DOM 访问的逻辑。一个自定义指令由一个包含类似组件生命周期钩子的对象来定义。钩子函数会接收到指令所绑定元素作为其参数。指令钩子及参数详见组件内自定义指令：在中（组合式API），任何以v开头的驼峰式命名的变量都可以被用作一个自定义指令
vue3日常知识点学习归纳
m0_59505309的博客
12-07 642
vue3日常知识点学习归纳
electron+vue3实现桌面端应用开发
08-18
结合这些知识点，"el-vue3"可能是一个基于Electron、Vue3和Vite的项目模板或者教程资料，可能包含了如何配置和运行这样一个项目的步骤。在这样的项目中，你将学习如何初始化Electron应用，设置Vue3和Vite的开发环境...
Vue3项目示例代码,项目代码使用pinia和vue-router等插件
06-27
Vue3项目示例代码是一个基于最新Vue.js框架的实践项目，它充分利用了Vue3的核心特性，如Composition API，以及流行的插件如Pinia和Vue Router，以实现更高效、更模块化的开发流程。以下是关于这个项目的详细知识点：...
基于Vue 3(ScriptSetup)TS Vite ElementPlus Pinia
04-03
下面将详细阐述这些技术栈的关键知识点。 1. **Vue 3 (Script Setup)**：Vue 3引入了Script Setup语法糖，它是Composition API的一种更简洁的写法。开发者可以直接在`<script setup>`标签中声明和组合Vue 3的响应式...
vue3、vite、pinia、车辆监控管理系统
05-27
Vue3 是下一代 Vue.js 框架的主要版本，它带来了许多重要的...在"vue3-monitor-master"这个项目文件中，包含了基于Vue3构建的车辆监控管理系统的源代码，开发者可以通过阅读和学习这些代码来理解上述知识点的实践应用。
【分享】前端程序员-技术网站推荐
一位前行者的博客
07-30 437
对于前端开发人员来说，以下是一些推荐的技术网站，这些网站提供了丰富的资源和知识，可以帮助你提升前端开发技能：收集一些 、、 的网站 vite 官方中文文档 element-plus 官方中文文档 pinia 官方中文文档 vue-router 官方中文文档 Tailwind CSS 官方文档 vitest 官方中文文档 es6 中文文档 axios 官方中文文档 vxetable 官方中文文档 lodash 中文文档 echarts 官方中文文档 animat
js、ts、argular、nodejs学习心得
最新发布
07-30 216
工作中需要前端argular开发桌面程序，后端用nodejs开发服务器，商用软件架构。
苍穹外卖浏览器前端界面修改
程序员象漂亮的博客
07-25 281
客户原始方案是期望做一个Spring Boot + Vue的饿了么系统，但时间上太仓促，所以建议选择开源的苍穹外码目作为作业提交。客户接受了建议的方案后，期望对前端页面提出了一些个性化的定制修改。
pinia 的使用 vue3
01-17
Pinia是Vue的官方状态管理库，用于在Vue3项目中实现数据共享。下面是使用Pinia的基本步骤： 1. 安装Pinia：在Vue3项目中，使用npm或yarn安装Pinia库。 2. 创建Pinia实例：在项目的入口文件中，创建一个Pinia实例并将其导出。 3. 定义状态：在需要共享状态的组件中，使用`defineStore`函数定义一个状态存储对象。 4. 注册状态：在组件中使用`useStore`函数注册状态，并在模板中使用。 5. 使用状态：在组件中可以通过`$store`访问状态，并在模板中使用。 下面是一个使用Pinia的示例代码： ```javascript // main.js import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) const pinia = createPinia() app.use(pinia) app.mount('#app') // store.js import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), actions: { increment() { this.count++ }, decrement() { this.count-- } } }) // Counter.vue <template> <div> <p>Count: {{ $store.counter.count }}</p> <button @click="$store.counter.increment()">Increment</button> <button @click="$store.counter.decrement()">Decrement</button> </div> </template> <script> import { useCounterStore } from './store' export default { setup() { const counterStore = useCounterStore() return { counterStore } } } </script> ``` 在上面的示例中，我们首先在`main.js`中创建了一个Pinia实例，并将其应用于Vue应用。然后，在`store.js`中定义了一个名为`counter`的状态存储对象，其中包含一个名为`count`的状态和两个操作。最后，在`Counter.vue`组件中使用`useCounterStore`函数注册状态，并在模板中使用`$store.counter.count`访问状态。
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值