位置: IT常识 - 正文

Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节(vue pending)

编辑:rootadmin
Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节 文章目录Pinia状态管理Pinia和Vuex的对比Pinia基本使用🍤创建Pinia🍤创建StorePinia核心概念State🍟state基本使用🍟state其他操作Pinia核心Getters🍕getters基本使用🍕getters其他操作Pinia核心Actions🥧Actions基本使用🥧Actions异步操作Pinia状态管理Pinia和Vuex的对比

推荐整理分享Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节(vue pending),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex几种状态,vue状态管理使用,vue 状态管理干什么的,vuex状态管理几种状态,vue状态管理使用,vue的状态改变方式,vue状态机,vue状态管理使用,内容如对您有帮助,希望把文章链接给更多的朋友!

Pinia(发音为/piːnjʌ/,如英语中的“peenya”)是最接近piña(西班牙语中的菠萝)的词;

Pinia开始于大概2019年,最初是作为一个实验为Vue重新设计状态管理,让它用起来适合组合式API(Composition API)。

从那时到现在,最初的设计原则依然是相同的,并且目前同时兼容Vue2、Vue3,也并不要求你使用Composition API;

Pinia本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享(这点和Vuex、Redux一样);

那么我们不是已经有Vuex了吗?为什么还要用Pinia呢?

Pinia 最初是为了探索 Vuex 的下一次迭代会是什么样子,结合了 Vuex 5 核心团队讨论中的许多想法;

最终,团队意识到Pinia已经实现了Vuex5中大部分内容,所以最终决定用Pinia来替代Vuex;

与 Vuex 相比,Pinia 提供了一个更简单的 API,具有更少的仪式,提供了 Composition-API 风格的 API;

最重要的是,在与 TypeScript 一起使用时具有可靠的类型推断支持;

和Vuex相比,Pinia有很多的优势:

优势一: mutations 不再存在:

他们经常被认为是非常冗长;他们最初带来了 devtools 集成,但这不再是问题;

优势二: 更友好的TypeScript支持,Vuex之前对TS的支持很不友好;

优势三: 不再有modules的嵌套结构:

你可以灵活使用每一个store,它们是通过扁平化的方式来相互使用的;

优势四: 也不再有命名空间的概念,不需要记住它们的复杂关系;

Pinia基本使用🍤创建Pinia

使用Pinia之前,我们需要先对其进行安装:

yarn add pinia

npm install pinia

使用pinia我们需要在单独的js文件中创建一个pinia, 并且在main.js中将其注册, 如下:

这样我们项目中就已经存在pinia了

import { createPinia } from "pinia";// 创建piniaconst pinia = createPinia()// 导出piniaexport default piniaimport { createApp } from 'vue'import App from './App.vue'// 导入piniaimport pinia from './stores'const app = createApp(App)// 注册piniaapp.use(pinia)app.mount('#app')🍤创建Store

什么是Store?

一个 Store (如 Pinia)是一个实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态;

它有点像始终存在,并且每个人都可以读取和写入的组件;

你可以在你的应用程序中定义任意数量的Store来管理你的状态;

Store有三个核心概念(接下来会一一讲到):

state、getters、actions;

等同于组件的data、computed、methods;

一旦 store 被实例化,你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性;

定义一个Store:

Store 是使用 defineStore() 定义的, 我们一般都会在一个单独的js的文件创建store, 不同组件的数据, 我们会定义在不同的js文件中创建不同的store

由于pinia中可以定义多个store, 所以每一个store它都需要一个唯一名称,作为第一个参数传递;

// 定义关于counter的storeimport { defineStore } from "pinia"// 调用defineStore定义store, defineStore返回一个函数const useCounter = defineStore("counter", { state: () => ({ counter: 101 })})// 将useCounter函数导出export default useCounter

第一个参数 name,也称为 id,是必要的,Pinia 使用它来将 store 连接到 devtools。

Vue中的Pinia状态管理工具 | 一篇文章教会你全部使用细节(vue pending)

defineStore()返回的函数统一使用useXXX作为命名方案, 且XXX一般就使用传入的id,这是约定的规范;

调用defineStore()返回的函数才会创建store

Store在它被使用之前是不会创建的,我们可以通过调用use函数来使用Store:

<template> <!-- 展示counterStore.counter的状态 --> <h2>{{ counterStore.counter }}</h2></template><script setup> // 导入我们自定义关于counter的store import useCounter from '../stores/counter'; // 调用函数才会创建store, 不调用不会创建 const counterStore = useCounter()</script>

注意Store获取到后, 如果我们想要对其解构, 不能直接解构,直接解构的话会失去响应式:

为了从 Store 中提取属性同时保持其响应式我们有两种方式

方式一: 解构时包裹一层toRefs

方式二: pinia给我们提供了一个方法, 使用storeToRefs()方法可以保持数据的响应式。

方式一

<script setup> import { toRefs } from 'vue'; import useCounter from '../stores/counter'; const counterStore = useCounter() // 包裹一层toRefs const { counter } = toRefs(counterStore)</script>

方式二

<script setup> import { storeToRefs } from 'pinia'; import useCounter from '../stores/counter'; const counterStore = useCounter() // 包裹一层storeToRefs const { counter } = storeToRefs(counterStore)</script>Pinia核心概念State🍟state基本使用

state 是 store 的核心部分,因为store是用来帮助我们管理状态的。

在 Pinia 中,状态被定义为返回初始状态的函数;

前面我们创建了一个counter.js文件用于定义counter的store, 接下来我们创建一个urse.js文件, 定义一个用户信息的store来演示state

在pinia中state和vuex中一样, state是一个函数, 返回一个对象

import { defineStore } from "pinia"const useUser = defineStore("user", { // state定义状态 state: () => ({ name: "chenyq", age: 18, height: 1.88 })})export default useUser

将定义的Store展示到组件中

<template> <div class="home"> <!-- 展示userStore中的状态 --> <h2>{{ name }}</h2> <h2>{{ age }}</h2> <h2>{{ height }}</h2> </div></template><script setup> import { storeToRefs } from 'pinia'; // 导入我们自定义的store import useUser from "../stores/user" // 调用函数创建store const userStore = useUser() // 将store中的状态解构出来 const { name, age, height } = storeToRefs(userStore)</script>🍟state其他操作

读取和写入 state

默认情况下,您可以通过 store 实例访问状态来直接读取, 刚刚我们就是这样读取状态的

写入状态其实也同理, 通过store实例访问状态直接修改

<template> <div class="home"> <!-- 展示userStore中的状态 --> <h2>{{ name }}</h2> <h2>{{ age }}</h2> <h2>{{ height }}</h2> <button @click="changeInfo">修改信息</button> </div></template><script setup> import { storeToRefs } from 'pinia'; import useUser from "../stores/user" const userStore = useUser() const { name, age, height } = storeToRefs(userStore) function changeInfo() { // 使用实例访问状态, 进行修改 userStore.name = "王老五" userStore.age = 20 userStore.height = 1.89 }</script>

重置 State

当我们对某些状态进行了修改之后, 我们可以通过调用 store 上的 $reset() 方法将状态 重置到其初始值;

$reset()方法会将所有的状态重置到初始值

<template> <div class="home"> <!-- 展示userStore中的状态 --> <h2>{{ name }}</h2> <h2>{{ age }}</h2> <h2>{{ height }}</h2> <button @click="changeInfo">修改信息</button><button @click="resetInfo">重置信息</button> </div></template><script setup> import { storeToRefs } from 'pinia'; import useUser from "../stores/user" const userStore = useUser() const { name, age, height } = storeToRefs(userStore) function changeInfo() { userStore.name = "王老五" userStore.age = 20 userStore.height = 1.89 }function resetInfo() { // 重置状态 userStore.$reset() }</script>

同时修改多个状态

可以调用 $patch 方法 , 它允许您使用部分“state”对象同时应用多个更改;

<template> <div class="home"> <!-- 展示userStore中的状态 --> <h2>{{ name }}</h2> <h2>{{ age }}</h2> <h2>{{ height }}</h2> <button @click="changeInfo">修改信息</button> </div></template><script setup> import { storeToRefs } from 'pinia'; import useUser from "../stores/user" const userStore = useUser() const { name, age, height } = storeToRefs(userStore) function changeInfo() { // $patch一次性修改多个状态 userStore.$patch({ name: "罗三炮", age: 50, height: 1.58 }) }</script>Pinia核心Getters🍕getters基本使用

Getters相当于Store的计算属性:

它们可以用 defineStore() 中的 getters 属性定义;

getters中可以定义接受一个state作为参数的函数;

在defineStore中定义gettersimport { defineStore } from "pinia"const useCounter = defineStore("counter", { state: () => ({ counter: 101 }), // 定义getters getters: { doubleCounter(state) { return state.counter * 2 } }})export default useCounter直接通过store对象就可以访问当前store的Getters<template> <!-- 访问当前store的Getters --> <h2>{{ counterStore.doubleCounter }}</h2></template><script setup> import useCounter from "../stores/counter" const counterStore = useCounter()</script>🍕getters其他操作

Getters中访问自己的其他Getters

我们可以通过this来访问到当前store实例的所有其他属性;

this相当于是绑定的store实例

例如在getter中访问自己的doubleCountergetters: { doubleCounter(state) { return state.counter * 2 }, doubleCounterAddOne() { return this.doubleCounter + 1 }}

Getters也可以返回一个函数,这样就可以接受参数:

const useCounter = defineStore("counter", { state: () => ({ counter: 101, friend: [ {id: 111, name: "chenyq"}, {id: 112, name: "王老五"}, {id: 113, name: "罗三炮"}, ] }), getters: { // getter可以返回一个函数 getfriendById() { return (id) => { return this.friend.find(item => item.id == id) } } }})<h2>{{ counterStore.getfriendById(111) }}</h2><h2>{{ counterStore.getfriendById(112) }}</h2>

当前Getters访问其他store中的state/getters

// 导入usrUserimport useUser from "./user"const useCounter = defineStore("counter", { state: () => ({ counter: 101 }), getters: { showMessage(state) { // 拿到userStore对象, 获取userStore中的信息 const userStore = useUser() // 返回自己store的信息拼接上userStore中的信息 return `${state.counter}${userStore.name}` } }})<h2>{{ counterStore.showMessage }}</h2>Pinia核心Actions🥧Actions基本使用

Actions 相当于组件中的 methods。

可以使用 defineStore() 中的 actions 属性定义,并且它们非常适合定义业务逻辑;

和getters一样,在action中可以通过this访问整个store实例的所有操作;

const useCounter = defineStore("counter", { state: () => ({ counter: 101 }), actions: { increment() { this.counter++ } }})<h2>{{ counterStore.counter }}</h2><button @click="changeState">+1</button><script setup> import useCounter from "../stores/counter" const counterStore = useCounter() function changeState() { // 通过store实例调用即可 counterStore.increment() }</script>🥧Actions异步操作

Actions中是支持异步操作的,并且我们可以编写异步函数,在函数中使用await

例如在Actions发生网络请求

import { defineStore } from 'pinia'const useHome = defineStore("home", { state: () => ({ // 定义空数组用于接收网络请求数据 banners: [], recommends: [] }), actions: { // 支持异步操作 async fetchHomeMultidata() { // 发送网络请求获取数据 const res = await fetch("http://123.207.32.32:8000/home/multidata") const data = await res.json() // 将获取的数据添加到state中 this.banners = data.data.banner.list this.recommends = data.data.recommend.list } }})export default useHome

展示网络请求获取到homeStore中的数据

<template> <div class="about"> <ul v-for="item in homeStore.banners" :key="item.acm"> <li>{{ item.title }}</li> </ul> </div></template><script setup> import useHome from "../stores/home" const homeStore = useHome() // 告知发送网络请求 homeStore.fetchHomeMultidata()</script>
本文链接地址:https://www.jiuchutong.com/zhishi/297716.html 转载请保留说明!

上一篇:node npm 下载,安装,使用 全网最全教程(npm安装node指定版本)

下一篇:最通俗易懂的LSTM讲解,一个例子理解通透!!(最通俗易懂的电动力学教材)

  • 我的公号到底什么时间推送效果最好?(我的公众号是什么)

    我的公号到底什么时间推送效果最好?(我的公众号是什么)

  • 荣耀手机如何设置导航三键(荣耀手机如何设置图标大小)

    荣耀手机如何设置导航三键(荣耀手机如何设置图标大小)

  • 删除对方还能举报吗(把对方删了还能举报我吗)

    删除对方还能举报吗(把对方删了还能举报我吗)

  • 电脑fn键在哪里(电脑键盘哪个是刷新键)

    电脑fn键在哪里(电脑键盘哪个是刷新键)

  • 华为主页面怎么设置的(华为主页面怎么切换)

    华为主页面怎么设置的(华为主页面怎么切换)

  • 手机WPS怎么压缩文件(手机wps怎么压缩包文件夹)

    手机WPS怎么压缩文件(手机wps怎么压缩包文件夹)

  • 华为colal10是华为什么型号(华为colal10是什么型号)

    华为colal10是华为什么型号(华为colal10是什么型号)

  • 缓存比直接看省流量吗(缓存越高越好吗)

    缓存比直接看省流量吗(缓存越高越好吗)

  • 笔记本晚上要关机吗(笔记本晚上要关机断电吗)

    笔记本晚上要关机吗(笔记本晚上要关机断电吗)

  • 浏览风险网站会有什么后果(浏览风险网站会被发现吗)

    浏览风险网站会有什么后果(浏览风险网站会被发现吗)

  • 微信里的充值是什么意思(微信里的充值是会收取手续费吗?)

    微信里的充值是什么意思(微信里的充值是会收取手续费吗?)

  • 抖音点赞作品不显示喜欢(抖音点赞作品不显示IP)

    抖音点赞作品不显示喜欢(抖音点赞作品不显示IP)

  • 抖音怎么取消置顶(抖音怎么取消置顶聊天)

    抖音怎么取消置顶(抖音怎么取消置顶聊天)

  • 电磁式电器的工作原理(电磁式电器工作特点有哪些)

    电磁式电器的工作原理(电磁式电器工作特点有哪些)

  • 快手加v认证有什么用(快手加v认证有什么好处)

    快手加v认证有什么用(快手加v认证有什么好处)

  • a320主板和b450区别(a320m主板和b450性能差距)

    a320主板和b450区别(a320m主板和b450性能差距)

  • a1707是什么型号(a1707是哪一年)

    a1707是什么型号(a1707是哪一年)

  • ipad air3能插u盘么(ipadair3可以直接读取u盘吗)

    ipad air3能插u盘么(ipadair3可以直接读取u盘吗)

  • 苹果11可以设置指纹解锁吗(苹果11可以设置几个人面容)

    苹果11可以设置指纹解锁吗(苹果11可以设置几个人面容)

  • bilibili直播怎么关礼物(bilibili直播怎么共享屏幕)

    bilibili直播怎么关礼物(bilibili直播怎么共享屏幕)

  • 支付宝怎么连蓝牙音响(支付宝怎么连蓝牙音箱)

    支付宝怎么连蓝牙音响(支付宝怎么连蓝牙音箱)

  • 激萌老年妆变化怎么拍(老年妆视频教程)

    激萌老年妆变化怎么拍(老年妆视频教程)

  • ps不能保存ram内存不够(ps不能存储为jpg怎么解决)

    ps不能保存ram内存不够(ps不能存储为jpg怎么解决)

  • 如何解决电脑无法读取游戏光碟?(如何解决电脑无法定位程序输入点)

    如何解决电脑无法读取游戏光碟?(如何解决电脑无法定位程序输入点)

  • vue3中使用axios(vue3中使用window方法)

    vue3中使用axios(vue3中使用window方法)

  • 土地价值计入房产税文件
  • 汽车购置税计算器2019
  • 以前年度出口退税申报
  • 汇算清缴职工教育费填在
  • 公司买的电器可以抵扣吗
  • 小规模纳税人未开票收入填在哪里
  • 土地转让的税费怎么算
  • 贷款买车需要到银行去吗
  • 个人独资公司需要报税吗
  • 可抵扣租赁费如何摊销做会计分录呢?
  • 公司预存话费应该怎么做会计处理?
  • 对方跨行转账成功后我却没收到款还能追回来吗
  • 企业用现金支付业务招待费1000元
  • 税号开错了
  • 增值税纳税表销售额的填写
  • 建筑工程项目部由哪几个部门组成
  • 企业的其他业务是什么
  • 进项税额转出的会计分录
  • 银行支票怎么用
  • 劳务报酬交的税汇算清缴能退
  • 转让无形资产税目征收营业税的是
  • 固定资产折旧有几类
  • 基本户和一般户的区别和用途
  • 如何设置电脑关机时清理使用痕迹
  • 存货跌价准备怎么理解
  • 计提长期待摊费用会计分录怎么写
  • window102020年最新版本
  • 苹果mac怎么删除照片
  • php字符串函数有哪些
  • 员工工伤一次性赔偿会计分录
  • 公司怎么查已报销发票
  • php输入月份输出天数
  • wordpress shortcode
  • php读取数据库复选框数据
  • Vue--》Vue3打造可扩展的项目管理系统后台的完整指南(一)
  • 不构成业务的反义词
  • pytorch map
  • 汇算清缴补交所得税怎么做凭证
  • 转让旧机器的会计分录
  • 企业注销前的账务处理
  • 如何用织梦在本地搭建网站
  • 出租厂房会计分录怎么写
  • mongodb导入
  • 管理费用借贷方不平
  • 发票可以付款前开吗
  • 不合格机器设备怎么处理
  • 企业内部控制的概念
  • 小微企业全年营业额不能超过多少
  • 成本核算的意义与作用
  • 进口代理费取费标准
  • 预付款开了发票
  • 银行贴息一般多久能到账
  • 投标费用如何入账科目
  • 小规模纳税人差旅费可以抵扣吗
  • 以前的房产证现在能过户吗
  • 未分配利润的
  • 税盘减免会计分录
  • 收到没有填税号的信息
  • 购入一辆运输汽车,价值5.6万元,款项尚未支付
  • mysql的ip怎么看
  • mysql自动清理数据
  • Mysql 5.6.37 winx64安装双版本mysql笔记记录
  • sql server 自增列设置语句
  • ubuntu更新版本
  • symsrv.dll 病毒专杀
  • win7原始账号和密码
  • freelibrary 程序崩溃
  • 升级win10之后东西不见了
  • win10 io1
  • win7ghost纯净版美化版
  • win10mobile更新出错
  • WIN10安装教程
  • react 同级组件之间传值
  • Linux中获取某个进程的系统调用以及参数(故障排查案例)
  • 利用感情骗取钱财算诈骗吗
  • node搭建本地服务器运行html
  • unity 1
  • 批处理是什么
  • 现在德国的普通话怎么样
  • 契税纳税申报表在哪里拿
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

    网站地图: 企业信息 工商信息 财税知识 网络常识 编程技术

    友情链接: 武汉网站建设