vue3中Pinia

已于 2024-06-13 08:55:55 修改
阅读量392 收藏 5
点赞数 10
文章标签： 前端 javascript vue.js vue
于 2024-06-12 11:09:09 首次发布
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/2301_77029516/article/details/139618190
版权

什么是Pinia  

vue2中的vuex对应vue3中的pinia

  Pinia是Vue的最新状态管理工具，是Vuex的替代品

相比于vux

1.创建两个组件

App.vue中导入两个组件

运行效果

2.安装Pinia

你也可以去Pinia官网看pinia.vuejs.org/zh/introduction.html入门教程

npm install pinia

安装好后

3.配置Pinia文件

在main.js中配置Pinia

4.创建srore

在src文件夹下创建store文件夹再创建counter.js

5.引用counter.js

运行效果

6.Pinia定义方法

两个组件引用

运行效果

7.Pinia-action的异步写法

创建channel.js,请求网址http://geek.itheima.net/v1_0/channels

APP.vue中

运行效果

火山时
关注
  • 10
    点赞
  • 踩
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
深入浅出vue3的pinia(相当于vue2的vuex)
weixin_46631078的博客
06-28 142
3.创建store文件（inde.js，里面代码如下：）（ts看官网）
vue3使用pinia
在下爱编程的博客
05-08 1035
vue3使用pinia 介绍 pinia的介绍官网都有的，可查阅中文版，官网：https://pinia.web3doc.top 安装 yarn add pinia or npm i pinia 创建store // store/index.ts import { defineStore } from 'pinia' // defineStore(key,options) 必须传递一个唯一key作为标识 export const useCounterStore = defineStore('counter
vue使用pinia (vue2/vue3)
^_^
09-23 7460
​inia是什么？Pinia 是 Vue.js 的轻量级状态管理库 官方网站：Pinia 中文文档: 介绍 | Pinia 中文文档 pinia与vuex4 相同 是vue 官方 状态管理工具(作者是 Vue 核心团队成员） 是vue开发者工具支持pinia 不同 pinia相比vuex4，对于vue3的 兼容性 更好 pinia相比vuex4，具备完善的 类型推荐 => 对 TS 支持很友好 Pinia 的 API 设计非常接近 Vuex 5 的提案。 vuex只能有一个根级别的状态,
vue3+vite+js 使用pinia -- vue2 vuex的plus版
半梅芒果干的博客
05-01 721
pinia请移驾查看
前端｜Vue Vue3中使用Pinia，保姆级教程
weixin_47192158的博客
05-16 4335
在状态管理中，"store"是一个全局对象，用来保存和管理应用的状态。在Pinia中，store是响应式的，这意味着当store中的状态改变时，依赖这些状态的组件会自动更新。每个Pinia store都是一个独立的实体，包含其自己的状态、getters和actions。在store中定义state，可以将它看作是组件的data选项。return {count: 0getters是store的计算属性，用来派生出一些状态。
vue3搭配pinia 环境
weixin_63477921的博客
02-27 365
第二步：打开main.ts文件。第三步：操作main.js。
uni-app 从vue3项目创建到Pinia管理数据全局使用 持久化存储数据 详细教程
qq_52602294的博客
05-02 3632
这是一个vue3配合pinia的详细教程 这里面的安装插件 尽量使用 yarn进行安装；persist有两种用法，如果persist: true 是存储全部的内容 ，把true换为paths: ['count']， 可以指定存储的数据
Vue3 使用pinia
web15185420056的博客
05-17 300
文章目录 什么是pinia 为什么使用pinia 安装pinia 添加到vue 状态管理定义 使用 什么是pinia 可以理解为状态管理工具 为什么使用pinia 解决状态传递的问题 可能存在一个状态(数据)为多个组件服务 其中一个组件对状态的更改，使其能在其他被依赖的组件中体现 安装pinia npm install pinia --save-dev 添加到vue 引入pinia的创建方法 创建pinia 通过use添加到vue import {createApp
uni-app+Vue3+pinia+uview-plus搭建的项目包
12-28
uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-plus搭建的项目包！uni-app+Vue3+pinia+uview-...
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化
05-12
vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+vuerouter+pinia+elementplus+ts环境模板搭建及vite打包优化vue3+ts+...
Vue3中Pinia状态管理库学习笔记
03-14
Vue3中的Pinia状态管理库是开发者们在构建复杂单页应用时不可或缺的工具之一。Pinia是Vue官方推荐的状态管理库，旨在替代之前的Vuex，以更简洁、易用的方式处理应用程序的状态。本篇文章将深入探讨Pinia的核心概念、...
uniapp+vue3+pinia框架（模块化+持久化存储）
06-15
在uniapp+vue3+pinia的场景下，使用Pinia的持久化插件，可以将store中的数据自动同步到本地存储，当应用重新加载时，可以恢复之前的状态，提高用户体验。需要注意的是，持久化存储应合理处理数据大小限制和用户隐私...
Vue3 + Vite5 + Vue Router + Pinia + Element Plus 搭建的后台管理模版
04-03
在Vue3中，它可以与Composition API无缝集成，使得路由守卫、懒加载等功能的实现更加简洁。通过定义路由配置，开发者可以轻松地创建动态路由、嵌套路由，实现复杂的导航结构。 Pinia是Vue3推荐的状态管理库，替代了...
Vue3 不同版本的Pinia如何做持久化存储
HaushoLin的博客
01-12 1222
不同版本的pinia支持的存储插件不同，高/低版本的持久化存储插件整合如下，都是我实践过的，请放心使用。😊。
uniapp使用 uview-plus 和 Pinia（vue3项目）
weixin_71403100的博客
07-23 7532
uniapp使用 uview-plus 和 Pinia（vue3项目）
Vue2 中对数组进行操作时需要注意什么
最新发布
m0_73882020的博客
09-06 553
在 Vue 2 中，对数组进行操作时，关键是确保操作能够被 Vue 的响应式系统检测到。使用 Vue 的响应式 API，如Vue.set或this.$set，可以确保数组的变化会被正确地反映到视图中。此外，避免直接修改数组的length属性或使用数组索引直接赋值，以确保视图的响应性。
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
weixin_52479803的博客
09-05 757
使用stripe进行在线支付、退款、订阅、取消订阅功能(uniapp+h5)
el-popover弹框自定义位置
weixin_47218354的博客
09-05 382
【代码】el-popover弹框自定义位置。
vue3中 pinia用法
07-13
在Vue 3中，Pinia 是一个状态管理库，它提供了一种简单且可扩展的方式来管理应用程序的状态。下面是在Vue 3中使用Pinia的基本用法示例： 1. 安装Pinia： ```bash npm install pinia ``` 2. 创建一个Pinia实例： ```javascript import { createPinia } from 'pinia' const pinia = createPinia() ``` 3. 在Vue应用程序的根组件中使用Pinia： ```javascript import { createApp } from 'vue' import App from './App.vue' import { pinia } from './pinia' createApp(App).use(pinia).mount('#app') ``` 4. 创建一个Store： ```javascript import { defineStore } from 'pinia' export const useCounterStore = defineStore('counter', { state() { return { count: 0, } }, actions: { increment() { this.count++ }, decrement() { this.count-- }, }, }) ``` 5. 在组件中使用Store： ```vue <template> <div> <p>Count: {{ count }}</p> <button @click="increment">Increment</button> <button @click="decrement">Decrement</button> </div> </template> <script> import { useCounterStore } from '@/stores/counter' export default { setup() { const counterStore = useCounterStore() return { count: counterStore.count, increment: counterStore.increment, decrement: counterStore.decrement, } }, } </script> ``` 这是一个简单的使用Pinia的示例，你可以根据自己的需求定义和使用不同的Store，并在组件中引用和操作相应的状态和方法。Pinia还提供了更多高级功能，例如模块化、插件等，你可以查阅Pinia的文档以获取更详细的信息。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值