详解Vue3-pinia状态管理
更新时间:2022年8月8日 22:11 点击:347 作者:QQ帝国
pinia是什么?
这个是 vue3 新的状态管理工具,简单来说相当于之前 vuex,它去掉了 Mutations 但是也是支持 vue2 的,尤大推荐。因为其logo像是一个菠萝,所以我们还称呼它为大菠萝。
这个是 vue3
新的状态管理工具,简单来说相当于之前 vuex
,它去掉了 Mutations
但是也是支持 vue2
的,尤大推荐。因为其logo像是一个菠萝,所以我们还称呼它为大菠萝。
官网
https://pinia.vuejs.org/
安装命令
npm i pinia
使用
1、mian.js
中引入 pinia
,全局注册
import { createApp } from 'vue' import { createPinia } from 'pinia' import App from './App.vue' const app = createApp(App) app.use(createPinia()) app.mount('#app')
2、store文件夹新建 index.js
文件,支持TS的你就建立 index.ts
,文件中引入 pinia
使用,用来存储状态
import {defineStore} from 'pinia' export const useUserStore = defineStore("USER",{ state() { return { name: '景天', age: 18, name1: '胡歌', age1: 36 } }, // 和vuex一样 getters: { }, // 和vuex一样 actions: { setAge() { this.age-- } } })
3、页面中使用 pinia
中存储的状态
<template> <div>正常取值</div> <div>{{User.name}}</div> <div>{{User.age}}</div> <div>解构取值</div> <div>{{name}}</div> <div>{{age}}</div> <div>解构取值转ref</div> <div>{{name1}}</div> <div>{{age1}}</div> <button @click="change1">change1</button> <button @click="change2">change2</button> <button @click="change3">change3</button> <button @click="change4">change4</button> <button @click="change5">change5</button> <div> <button @click="handleReset">重置</button> </div> </template> <script setup lang="ts"> import { storeToRefs } from 'pinia'; import { useUserStore } from './store'; // 获取store中的值 let User = useUserStore() // 通过ES6的结构取值,但是这个值不是响应式的 let {name,age} = User // 通过pinia自带的方法,转换成ref,就是响应式的了 let {name1,age1} = storeToRefs(User) // 改变store中值的方式有五种 // 方式一 function change1() { User.age++ } // 方式二,可一次性修改多个值,对象的形式 function change2() { User.$patch({ name: '雪见', age: 17 }) } // 方式三,可一次性修改多个值,函数的形式 function change3() { User.$patch((state) => { state.name = '徐长卿' state.age = 19 }) } // 方式四,哪怕修改一个值,也要传所有值??? function change4() { User.$state = { name: '茂茂', age: 16, name1: '李逍遥', age1: 18 } } // 方式五,借助actions function change5() { User.setAge() //也可以传参 // User.setAge(999) } // 重置数据 function handleReset() { User.$reset() } </script> <style> </style>
到此这篇关于Vue3-pinia状态管理的文章就介绍到这了,更多相关Vue3-pinia状态管理内容请搜索猪先飞以前的文章或继续浏览下面的相关文章希望大家以后多多支持猪先飞!
原文出处:https://blog.csdn.net/QQ_Empire/article/details/126223602
相关文章
- 这篇文章主要介绍了浅谈vue2的$refs在vue3组合式API中的替代方法,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-18
- 今天将从 Vue 的入口文件开始,看看声明了一个 Vue 的单文件之后是如何被 compile-core 编译核心模块编译成渲染函数的。下面小编讲解并附上代码分析展现在文章里,感兴趣的小伙伴不要错过奥...2021-09-25
- 这篇文章主要介绍了vue3弹出层V3Popup实例详解,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下...2021-01-04
- 源码的重要性相信不用再多说什么了吧,特别是用Vue 框架的,一般在面试的时候面试官多多少少都会考察源码层面的内容,下面这篇文章主要给大家介绍了关于vue3源码剖析之简单实现的相关资料,需要的朋友可以参考下...2021-09-07
- 这篇文章主要介绍了Vue3中的三种函数,分别对reactive函数toRef函数以及ref函数原理及使用作了简单介绍,有需要的朋友可以借鉴参考下...2021-09-24
- 这篇文章主要介绍利用Vue3 创建Vue CLI 项目,下面文章内容附有官方文档链接,安装过程,需要的可以参考一下...2021-10-18
- 这篇文章主要给大家分享的是Vue3的几个优势,Vue3仍然在源码、性能和语法 API 三个大的方面进行了优化,下面我们一起进入文章看看具体详情吧...2021-10-26
- 这篇文章主要介绍了利用vue3+ts实现管理后台(增删改查),文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-10-30
- 这篇文章主要给大家介绍了关于vue3封装放大镜组件的相关资料,封装之后,使用起来就更简单了,一个组件一行就可以,文中通过示例代码介绍的非常详细,需要的朋友可以参考下...2021-09-20
- 这篇文章主要介绍了使用Vue3进行数据绑定及显示列表数据,整篇文章围绕Vue3进行数据绑定及显示列表数据的想换自来哦展开内容,需要的小伙伴可以参考一下...2021-10-23
- 这篇文章主要介绍了详解vue3 沙箱机制,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-04-15
- vue的应用状态管理提供了mapState、mapGetters、mapMutations、mapActions四个辅助函数,所谓的辅助函数分别对State、Getters、Mutations、Actions在完成状态的使用进行简化...2021-10-10
- 这篇文章主要介绍了40行代码把Vue3的响应式集成进React做状态管理,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-05-20
- 这篇文章主要介绍了Vue3 响应式侦听与计算的实现,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2020-11-11
- 在vue3中对响应式数据的声明官方给出了ref()和reactive()这两种方式,这篇文章主要给大家介绍了关于Vue3.0中Ref与Reactive区别的相关资料,需要的朋友可以参考下...2021-07-07
- 这篇文章我们从 ast 生成时调用的 baseParse 函数分析,再到 baseParse 返回 createRoot 的调用结果,一直到细化的讲解了 parseChildren 解析子节点函数中的其中某一个具体解析器的执行过程。最后通过一个简单模板举例,需要的朋友可以参考下...2021-09-25
- 最近在使用Vue.js时候没有自动提示,就很难受,下面这篇文章主要给大家介绍了关于Vue3没有代码提示问题的解决办法,文中通过图文介绍的非常详细,需要的朋友可以参考下...2023-01-17
- 当我们不想每次跳转路由都会重新加载页面时(重新加载页面很耗时),就可以考虑使用keep-alive缓存页面了,这篇文章主要给大家介绍了关于vue3缓存页面keep-alive及路由统一处理的相关资料,需要的朋友可以参考下...2021-10-17
- 本文主要介绍了手摸手教你实现Vue3 Reactivity,文中通过示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下...2021-08-25
- 这篇文章主要给大家介绍了关于vue3如何优雅的实现移动端登录注册模块的相关资料,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧...2021-03-28