位置: IT常识 - 正文

【Vue全家桶】Pinia状态管理(vue全家桶学多久能上手项目)

编辑:rootadmin
【Vue全家桶】Pinia状态管理 【Vue全家桶】Pinia状态管理文章目录【Vue全家桶】Pinia状态管理写在前面一、认识Pinia1.1 认识Pinia1.2 为什么使用Pinia?二、 Store2.1 定义Store2.2 Option对象2.3 setup函数2.4 使用定义的Store三、Pinia核心概念State3.1 定义State3.2 操作State3.3 使用选项式 API 的用法四、Pinia核心概念Getters4.1 认识Getters4.2 访问Getters4.3 向Getters传递参数五、Pinia核心概念Actions5.1 认识Actions5.2 Actions执行异步操作5.3 访问其他 store 的 Actions写在前面

推荐整理分享【Vue全家桶】Pinia状态管理(vue全家桶学多久能上手项目),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vuex全家桶,vue全家桶学多久能上手项目,vue全家桶怎么用,vue全家桶学多久能上手项目,vuex全家桶,vue全家桶插件有哪些,vue2.0全家桶,vuex全家桶,内容如对您有帮助,希望把文章链接给更多的朋友!

🤗这里是前端程序员小张!

🌻人海茫茫,感谢这一秒你看到这里。希望我的文章对你的有所帮助!

🌟愿你在未来的日子,保持热爱,奔赴山海!

一、认识Pinia1.1 认识PiniaPinia开始于大概2019年,其目的是设计一个拥有 组合式 API 的 Vue 状态管理库目前同时兼容Vue2、Vue3,也并不要求你使用Composition APIPinia本质上依然是一个状态管理库,用于跨组件、页面进行状态共享

状态管理库是什么?

是一个保存状态和业务逻辑的实体,它会持有为绑定到你组件树的状态和业务逻辑,也就是保存了全局的状态;它有点像一个永远存在的组件,每个组件都可以读取和写入它;你可以在你的应用程序中定义任意数量的Store来管理你的状态;

应该在什么时候使用 Store?

一个 Store 应该包含可以在整个应用中访问的数据。这包括在许多地方使用的数据,例如显示在导航栏中的用户信息,以及需要通过页面保存的数据,例如一个非常复杂的多步骤表单。另一方面,应该避免在 Store 中引入那些原本可以在组件中保存的本地数据,例如,一个元素在页面中的可见性。

安装:npm install pinia

1.2 为什么使用Pinia?

使用 Pinia,即使在小型单页应用中,你也可以获得如下功能:

Devtools 支持追踪 actions、mutations 的时间线在组件中展示它们所用到的 Store让调试更容易的 Time travel热更新不必重载页面即可修改 Store开发时可保持当前的 State插件:可通过插件扩展 Pinia 功能为 JS 开发者提供适当的 TypeScript 支持以及自动补全功能。支持服务端渲染二、 Store

Store有三个核心概念:

state、getters、actions;等同于组件的data、computed、methods;一旦 store 被实例化,你就可以直接在 store 上访问 state、getters 和 actions 中定义的任何属性;2.1 定义Store

Store 是用 defineStore() 定义的

它需要一个唯一名称,作为第一个参数传递这个名字 ,也被用作 id ,是必须传入的, Pinia 将用它来连接 store 和 devtools。返回的函数统一使用useX作为命名方案,这是约定的规范defineStore() 的第二个参数可接受两类值:Setup 函数或 Option 对象import { defineStore } from 'pinia'// 你可以对 `defineStore()` 的返回值进行任意命名,但最好使用 store 的名字,同时以 `use` 开头且以 `Store` 结尾。// 第一个参数是你的应用中 Store 的唯一 ID。export const useCounterStore = defineStore('counter', { // 其他配置...})2.2 Option对象

我们也可以传入一个带有 state、actions 与 getters 属性的 Option 对象:

我们可以认为state 是 store 的数据 (data)getters 是 store 的计算属性 (computed)而 actions 则是方法 (methods)export const useCounterStore = defineStore('counter', { state: () => ({ count: 0 }), getters: { double: (state) => state.count * 2, }, actions: { increment() { this.count++ }, },})2.3 setup函数

与 Vue 组合式 API 的 setup 函数 相似

我们可以传入一个函数,该函数定义了一些响应式属性和方法并且返回一个带有我们想暴露出去的属性和方法的对象在 Setup Store 中:ref() 就是 state 属性computed() 就是 gettersfunction() 就是 actionsexport const useCounterStore = defineStore('counter', () => { const count = ref(0) function increment() { count.value++ } return { count, increment }})2.4 使用定义的Store【Vue全家桶】Pinia状态管理(vue全家桶学多久能上手项目)

Store在它被使用之前是不会创建的,我们可以通过调用**useStore()**来使用Store:

<script setup>import { useCounterStore } from '@/stores/counter'const store = useCounterStore()</script>一旦 store 被实例化,你可以直接访问在 store 的 state、getters 和 actions 中定义的任何属性。注意Store获取到后不能被解构,那么会失去响应式:为了从 Store 中提取属性同时保持其响应式,您需要使用storeToRefs()。三、Pinia核心概念State3.1 定义State

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

在 Pinia 中,状态被定义为返回初始状态的函数import { defineStore } from 'pinia'export const useCounter = defineStore('counter', { // 为了完整类型推理,推荐使用箭头函数 state: () => { return { // 所有这些属性都将自动推断出它们的类型 counter: 0 } }})3.2 操作State

读取和写入State:

默认情况下,您可以通过 store 实例访问状态来直接读取和写入状态const counterStore = useCounter()counterStore.counter++

重置State

你可以通过调用 store 上的 $reset() 方法将状态 重置 到其初始值const counterStore = useCounter()counterStore.$reset()

变更State

除了用 store.count++ 直接改变 store,你还可以调用 $patch 方法它允许你用一个 state 的对象在同一时间更改多个属性counterStore.$patch({ counter : 1, age: 120, name: 'pack',})3.3 使用选项式 API 的用法// 示例文件路径:// ./src/stores/counter.jsimport { defineStore } from 'pinia'const useCounterStore = defineStore('counter', { state: () => ({ count: 0, }),})四、Pinia核心概念Getters4.1 认识Getters

Getters 完全等同于 store 的 state 的计算属性

可以通过 defineStore() 中的 getters 属性来定义它们。推荐使用箭头函数,并且它将接收 state 作为第一个参数export const useCounter = defineStore('counter', { state: () => ({ counter: 15 }), getters: { doubleCounter: (state) => state.counter * 2 }})4.2 访问Getters

访问当前store 实例上的 getters

const counterStore = useCounter()console.log(counterStore.doubleCounter)

Getters中访问当前store实例的其他Getters

我们可以通过 this,你可以访问到其他任何 gettersgetters: { doubleCount: (state) => state.counter * 2, // 返回 counter 的值乘以 2 加 1 doubleCountPlusOne() { return this.doubleCount + 1 }}

访问其他store实例的Getters

getters: { otherGetter(state) { const otherStore = useOtherStore() return state.localData + otherStore.data }}4.3 向Getters传递参数

Getters可以 返回一个函数,该函数可以接受任意参数:

export const useUserListStore = defineStore('main', { state: () => ({ users: [ { id: 1, name: 'lisa' }, { id: 2, name: 'pack' } ] }), getters: { getUserById: (state) => { return (userId) => { state.users.find((user) => user.id === userId) } } }})

在组件中使用:

<template> <p>User 2: {{ getUserById(2) }}</p></template><script setup>import { useUserListStore } from './store'const userList = useUserListStore()const { getUserById } = storeToRefs(userList)</script>五、Pinia核心概念Actions5.1 认识Actions

Actions 相当于组件中的 methods。

可以通过 defineStore() 中的 actions 属性来定义,并且它们也是定义业务逻辑的完美选择。

类似 Getters,Actions 也可通过 this 访问整个 store 实例

export const useCounterStore = defineStore('counter', { state: () => ({ counter: 15 }), actions: { increment() { this.counter++ } }})5.2 Actions执行异步操作

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

actions: { increment() { this.counter++ }, async fetchDataAction() { const res = await fetch("http://jsonplaceholder.typicode.com/posts") const data = await res.json() return data }}

Actions 可以像函数或者通常意义上的方法一样被调用:

<script setup>import { useCounterStore } from './store/couter';const counterStore = useCounterStore()counterStore.fetchDataAction().then(res => { console.log(res)})</script>5.3 访问其他 store 的 Actionsimport { useAuthStore } from './auth-store'export const useSettingsStore = defineStore('settings', { state: () => ({ preferences: null, // ... }), actions: { async fetchUserPreferences() { const auth = useAuthStore() if (auth.isAuthenticated) { this.preferences = await fetchPreferences() } else { throw new Error('User must be authenticated') } }, },})
本文链接地址:https://www.jiuchutong.com/zhishi/300793.html 转载请保留说明!

上一篇:【前端灵魂脚本语言JavaScript①】——JS引入方式(前端脚本开发)

下一篇:React的受控组件和非受控组件介绍(react受控和不受控组件的区别)

  • 西安一码通二维码怎么申请(西安一码通二维码有效期多久)

    西安一码通二维码怎么申请(西安一码通二维码有效期多久)

  • 微信聊天记录可以发送给别人吗(微信聊天记录可以在另外一个手机上恢复吗)

    微信聊天记录可以发送给别人吗(微信聊天记录可以在另外一个手机上恢复吗)

  • 华为mate30配beatsx可以吗

    华为mate30配beatsx可以吗

  • ipadpro有几个版本(苹果ipadpro共有几代)

    ipadpro有几个版本(苹果ipadpro共有几代)

  • 华为手机备忘录在手机哪里(华为手机备忘录在哪个文件夹?)

    华为手机备忘录在手机哪里(华为手机备忘录在哪个文件夹?)

  • 课堂派直播能看到学生在线时长吗(课堂派直播可以回放吗)

    课堂派直播能看到学生在线时长吗(课堂派直播可以回放吗)

  • 华为手机带耳机吗(华为手机带耳机自动播放音乐怎么关闭)

    华为手机带耳机吗(华为手机带耳机自动播放音乐怎么关闭)

  • 电脑进水屏幕花了怎么办(电脑进水屏幕花了)

    电脑进水屏幕花了怎么办(电脑进水屏幕花了)

  • 直流屏作用(电力直流屏作用)

    直流屏作用(电力直流屏作用)

  • 怎么才能得到抖音钻卡(怎么才能得到抖音官方送的中秋礼物)

    怎么才能得到抖音钻卡(怎么才能得到抖音官方送的中秋礼物)

  • 内存卡怎么在手机上下载歌(内存卡怎么在手机上读取)

    内存卡怎么在手机上下载歌(内存卡怎么在手机上读取)

  • 小米10支持反向充电吗(小米支持反向无线充电的手机)

    小米10支持反向充电吗(小米支持反向无线充电的手机)

  • ipad关机了还能追踪吗(ipad关机了还能播放声音吗)

    ipad关机了还能追踪吗(ipad关机了还能播放声音吗)

  • 为什么qq关了设备锁还要验证码(qq明明关了设备锁怎么还开着)

    为什么qq关了设备锁还要验证码(qq明明关了设备锁怎么还开着)

  • 哔咔在苹果商店叫什么(哔咔苹果app)

    哔咔在苹果商店叫什么(哔咔苹果app)

  • 苹果11前面有呼吸灯吗(苹果11前呼吸灯闪烁在哪里设置)

    苹果11前面有呼吸灯吗(苹果11前呼吸灯闪烁在哪里设置)

  • 手机设置停机怎么设置(手机设置停机怎么搞)

    手机设置停机怎么设置(手机设置停机怎么搞)

  • 如何删除京东评价中心记录(如何删除京东评价晒单)

    如何删除京东评价中心记录(如何删除京东评价晒单)

  • 共享单车无法实名怎么办(共享单车无法实名认证)

    共享单车无法实名怎么办(共享单车无法实名认证)

  • 小米平板4突然开不了机(小米平板4突然黑屏无反应,无法关机重启)

    小米平板4突然开不了机(小米平板4突然黑屏无反应,无法关机重启)

  • 视频如何去水印免费(b站视频如何去水印)

    视频如何去水印免费(b站视频如何去水印)

  • win7共享没有权限访问(windows7共享没有权限)

    win7共享没有权限访问(windows7共享没有权限)

  • 快手直播怎么竞猜(快手直播怎么竞选主播)

    快手直播怎么竞猜(快手直播怎么竞选主播)

  • vivoy67最近删除在哪(vivoy67a最近删除在哪)

    vivoy67最近删除在哪(vivoy67a最近删除在哪)

  • 苹果7plus微信视频怎么开美颜(苹果7plus微信视频如何美颜)

    苹果7plus微信视频怎么开美颜(苹果7plus微信视频如何美颜)

  • 不缴或少缴应纳税款的处罚措施
  • 股权转让和变更法人一样吗?
  • 小规模升级一般纳税人需要多久
  • 销项减进项余额在哪方
  • 在登记账簿时,应在记账凭证上注明所记账簿的页数
  • 企业所得税汇算清缴申报表
  • 当月进项税额大于销项税额
  • 税控盘服务费怎么填写申报表
  • 伤亡保险是什么意思
  • 非金融机构借款计入什么科目
  • 小型微利企业所得税优惠政策
  • 小规模季度不超过多少不用交税
  • 建筑业增值税专票抵扣后的税点是多少
  • 发票上的二维码可以扫金额吗
  • 税收缴款书怎么做凭证
  • 发放股票股利后的未分配利润怎么算
  • 海关进口增值税可以抵扣吗
  • 银行存款余额调节表保管期限
  • 公司注销对外投资股权有效吗
  • 零申报工会经费滞纳金怎么算
  • win10如何设置声音
  • 入账价值是啥
  • 配股条件是什么意思
  • 华为设置输入法手写
  • php数据库分页是怎么实现的
  • 广告费和业务宣传费15%还是30%
  • 接口500错误原因
  • PHP:file_put_contents()的用法_Filesystem函数
  • 如何计算业务招标价格
  • 微信小程序分成比例
  • vue3中props
  • 销售滞后税务处理
  • yii2中dropDownList实现二级和三级联动写法
  • 用php编写从大到小排序
  • laravel sqlserver
  • 管理费用只能在借方吗
  • 小企业会计准则会计科目表
  • 当期进项加计额怎么填
  • 固定资产折旧计算方法公式大全
  • sql2008收缩日志文件
  • 管理费用的范畴
  • 固定资产减值损失计入
  • 回购股票不注销如何发可转债
  • 资产负债表里的固定资产是原值还是净值
  • 长期待摊费用会计分录
  • 手工账做账流程总结
  • 住宿费专票可以抵扣进项税吗税率多少
  • 服务行业收入会增加吗
  • 母公司和子公司是两个完全独立的法人
  • 广告费属于管理费用的哪一类
  • 酒店会计做账流程视频
  • win 系统
  • shell 日期运算
  • WeatherEye.exe - WeatherEye 是什么进程
  • KunlunPlatform.exe是什么进程?KunlunPlatform.exe是安全的程序吗?
  • win8系统安装步骤
  • 电脑键盘上f1到f12快捷键的功能分别是
  • 高手养成计划 小说
  • win10应用商店更新软件更新不了
  • iptables: Unknown error 4294967295问题解决方法
  • opengl入门教程(精)
  • 在Html中使用Requirejs进行模块化开发实例详解
  • jquery常用api
  • activity的生命周期有哪些状态
  • for语句的执行过程图解
  • javascript数学函数
  • 详解jQuery中的empty、remove和detach
  • javascript高级教程pdf
  • 纪检委是干什么工作的能管理税务管理局吗
  • 电子湖北税务局
  • 一般纳税人出售房产怎么开票
  • 生猪屠宰企业报价
  • 临港税务局第四分局电话
  • 在深圳,企业房贷怎么办
  • 天津本田天虹90摩托车库存
  • 云南国税申报
  • 常态化与长效化的区别
  • 三门峡哪个小区是原火葬场
  • 增值税专用发票怎么开
  • 国税上海税务局官网
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设