位置: IT常识 - 正文

Vue3-Pinia的基本使用

编辑:rootadmin
Vue3-Pinia的基本使用 什么是Pinia呢?

推荐整理分享Vue3-Pinia的基本使用,希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:,内容如对您有帮助,希望把文章链接给更多的朋友!

Pina开始于大概2019,是一个状态管理的库,用于跨组件、页面进行状态共享(这和Vuex、Redux一样),用起来像组合式API(Composition API)

Pinia和Vuex的区别PInia的最初是为了探索Vuex的下一次迭代会是什么样子,结合了Vuex核心团队讨论中的许多想法;最终,团队意识到Pinia已经实现了Vuex5中大部分内容,所以最终决定用Pinia来替代Vuex;与Vuex相比,Pinia提供了一个更简单的API,具有更少的仪式,提供了Composition-API风格的API更重要的是,与TypeScript一起使用时具有可靠的类型推断支持与Vuex相比,Pinia很多的优势:

比如mutations不再存在:

mutations最初是为devtools集成,但这不在是问题他们经常认为是非常冗长

更友好的TpeScipt支持,Vuex之前对Ts的支持很不友好

不在有modules的嵌套结构

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

不在有命名空间的概念,不在需要记住他们的复杂关系

如何使用Pinia

1、安装Pinia

yarn add pinianpm install pinia

2、创建pinia文件

store文件里index.js

import { createPinia } from 'pinia'const pinia = createPinia()export default pinia

3、main.js导入并引用

import { createApp } from 'vue'import App from './App.vue'import pinia from './stores'createApp(App).use(pinia).mount('#app')

4、pinia的状态管理,不同状态可以区分不同文件

//定义关于counter的storeimport { defineStore } from ‘pinia’//defineStore 是返回一个函数 函数命名最好有use前缀,根据函数来进行下一步操作const useCounter = defineStore('counter',{state: () => {count:99}})export default useCounter

5、调用pinia,获取pinia状态值,导入Counter.js,获取Counter.js里面state.count

<template> <div class="home"> <h2>Home View</h2> <h2>count: {{ counterStore.count }}</h2> </div></template><script setup> import useCounter from '@/stores/counter'; const counterStore = useCounter()</script><style scoped></style>Vue3-Pinia的基本使用

注意:pinia解构出来的state也是可以调用,但会失去响应式,需要toRef或者pinia自带storeToRefs

<template> <div class="home"> <h2>Home View</h2> <h2>count: {{ counterStore.count }}</h2> <h2>count: {{ count }}</h2> <button @click="incrementCount">count+1</button> </div></template><script setup> import { toRefs } from 'vue' import { storeToRefs } from 'pinia' import useCounter from '@/stores/counter'; const counterStore = useCounter() // const { count } = toRefs(counterStore) const { count } = storeToRefs(counterStore) function incrementCount() { counterStore.count++ }</script><style scoped></style>store的核心部分:state,getter,action

(相当于:data、computed、methods)

认识和定义State

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

操作State

读取和写入state:

默认情况下,可以通过store实例访问状态来直接读取和写入状态;

```const counterStore = useCounter()counterStore.counter++counterStore.name = 'coderWhy'```

重置State: 可以调用store上的$reset()方法将状态重置到其初始值

const counterStore = useCounter()conterStore.$reset()

改变State

除了直接用store.counter++修改store,还可以调用$patch

它允许您使用部分‘state’对象同时应该多个修改

const counterStore = useCounter()counterStore.$patch({counter:100,name:'kobe'})

替换State 可以通过将其$state属性设置为新对象替换Store的整个状态

conterStore.$state = {counter:1,name:'why'}认识和定义Getters

Getters相当于Store的计算属性:

它们可用defineStore()中的getters属性定义getters中可以定义接受一个state作为参数的函数expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{doubleCounter(state){return state.counter *2}}})

访问Store里getters方法

访问当前store的getters:

const counterSotre = useCounter()console.log(counterStore.doublCounter)

我们可以使用this来访问当前的store实例中getters

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{doubleCounter(state){return state.counter *2}doubleCounterAdd(){//this指向storereturn this.doubleCounter +1 }}})

访问其它store的getters

import useUser from ./userconst userStore = useUser()expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounterUser(){return this.doubleCounter + userStore.umu}}})

通过getters可以返回一个函数,可以传参数

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounter(state){return function (is) {return state.id + id}}}})const StoreConter = useCounter();//传参StoreCounter.doublCounter(111)认识和定义Actions

Actions 相当于组件中的methods,可以使用defineStore()中的actions属性定义

expoer const useCounter = defineStore('counter',{state: () => {counter:100,firstname:'kobe'},getters:{//调用其它StoredoubleCounter(state){return function (is) {return state.id + id}}},actions:{increment(){this.counter++},//传参incrementnum(num){this。counter += num}}})

和getters一样,在action中可以通过this访问整个store实例:

function increment(){//调用counterStore.increment()}function incrementnum(){counterStore.increment(10)}Actions执行异步操作:

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

actions:{async fetchHome(){//???请求const res = await fetch('?????')const data = await res.json()console.log('data',data)return data}}cosnt counterStore = useCountercounterStore.fetchHome().then(res => {console.log(res)})
本文链接地址:https://www.jiuchutong.com/zhishi/299275.html 转载请保留说明!

上一篇:前端开发是做什么的?工作职责(前端开发做什么副业)

下一篇:Vue 3 介绍

  • iphone12mini多重(苹果12mini多重多少克)

    iphone12mini多重(苹果12mini多重多少克)

  • 微信注销对方显示什么(如果微信注销对方好友列表里显示)

    微信注销对方显示什么(如果微信注销对方好友列表里显示)

  • 电脑怎么下载视频到u盘(电脑怎么下载视频音乐到U盘)

    电脑怎么下载视频到u盘(电脑怎么下载视频音乐到U盘)

  • 华为防频闪有必要开吗(华为防频闪开吗)

    华为防频闪有必要开吗(华为防频闪开吗)

  • 抖音直播送小心心花钱吗(抖音直播送小心心一个多少钱)

    抖音直播送小心心花钱吗(抖音直播送小心心一个多少钱)

  • 苹果为什么更新不了版本(苹果为什么更新不了系统)

    苹果为什么更新不了版本(苹果为什么更新不了系统)

  • 苹果11打电话无网络(苹果11打电话无声,重启可以)

    苹果11打电话无网络(苹果11打电话无声,重启可以)

  • 滴滴打车能预约时间吗(滴滴打车能预约第二天的车吗)

    滴滴打车能预约时间吗(滴滴打车能预约第二天的车吗)

  • 小米手环4升级死机(小米手环4升级后耗电快)

    小米手环4升级死机(小米手环4升级后耗电快)

  • 什么是一种可以将图形信息输入到计算机内部的设备(什么是一种可以创建和体验虚拟世界的交叉前沿技术)

    什么是一种可以将图形信息输入到计算机内部的设备(什么是一种可以创建和体验虚拟世界的交叉前沿技术)

  • 哔哩哔哩33卡怎么退订(哔哩哔哩33卡怎么取消套餐)

    哔哩哔哩33卡怎么退订(哔哩哔哩33卡怎么取消套餐)

  • 苹果XR手机突然黑屏了这是怎么办(苹果xr手机突然没有信号了怎么办)

    苹果XR手机突然黑屏了这是怎么办(苹果xr手机突然没有信号了怎么办)

  • 抖音的流量在哪里可以看到(抖音的流量在哪里买)

    抖音的流量在哪里可以看到(抖音的流量在哪里买)

  • vivoy85a屏幕多大尺寸(vivo y85a屏幕尺寸)

    vivoy85a屏幕多大尺寸(vivo y85a屏幕尺寸)

  • ipados分屏怎么使用(ipados 如何分屏)

    ipados分屏怎么使用(ipados 如何分屏)

  • 苹果xsmax支持反向充电吗(苹果xsmax能反向充电么)

    苹果xsmax支持反向充电吗(苹果xsmax能反向充电么)

  • 机械表时间不准怎么调(机械表时间不准怎么办)

    机械表时间不准怎么调(机械表时间不准怎么办)

  • a1530是苹果手机那个型号(苹果手机a1530是苹果几)

    a1530是苹果手机那个型号(苹果手机a1530是苹果几)

  • 华为手机月亮图标是什么功能(华为手机月亮图案怎么去除)

    华为手机月亮图标是什么功能(华为手机月亮图案怎么去除)

  • 电话响几声自动挂断(电话响几声自动挂掉)

    电话响几声自动挂断(电话响几声自动挂掉)

  • 不是快充手机可以用快充充电器吗(不是快充手机可以用5v2a的充电器吗)

    不是快充手机可以用快充充电器吗(不是快充手机可以用5v2a的充电器吗)

  • rdev命令  查询、设置内核映像文件(chage -l命令)

    rdev命令 查询、设置内核映像文件(chage -l命令)

  • 缴纳企业所得税会计分录怎么做
  • 会员退费怎么算
  • 票据承兑和贴现市场上最主要的交易对象是( )
  • 公司汽车的折旧费可以扺税吗
  • 小规模纳税人税额怎么做分录
  • 车船税应该计入什么费用
  • 支付增值税税控系统技术维护费用500元
  • 技术转让成本包括什么
  • 公司存款利率
  • 机器设备预付的费用计入
  • 递延所得税如何计算
  • 港币转人民币差额怎么平帐?
  • 建筑业发票可以在备注里加备注么
  • 公司固定资产丢失谁负责
  • 采购合同可以包含安装吗
  • 实收资本是否可以更改
  • 买车的增票可以分两次吗
  • 非专利技术转让合同印花税
  • 其他债权投资期末公允价值的变动应当计入
  • win7为什么这么多人用
  • win10电脑屏幕颜色变了怎么调到原来的
  • Win10无法访问局域网计算机
  • Win11安装失败怎么办
  • 关联企业承担什么责任
  • element ui+vue
  • 没有购入发票可以开出发票
  • 应收款余额在借方什么意思
  • 企业所得税股息红利所得来源地
  • 开发票为什么要对公账户?
  • 小企业会计制度最新版
  • smarty怎么用
  • 餐费计入什么费用
  • cnpm安装成功为什么用不了
  • 以前年度损益调整借贷方向
  • python中的参数传递
  • 制造费用的作用
  • 生产部门使用的无形资产摊销
  • 个人所得税税率怎么算
  • 银行对帐单
  • 公司车辆过户给个人需要多少费用
  • 预收的房租需要交房产税吗
  • 租赁存在的原因有哪些
  • 公司为员工购买小汽车属于什么所得
  • 销售费用工资是什么科目
  • 成本结转的方法实例
  • 如何进行固定资产审计
  • mysql转移表数据表
  • 利用pt-heartbeat监控MySQL的复制延迟详解
  • Apple Watch怎么解绑ID
  • 惠普台式笔记本一体机电脑bios中文
  • window10电池
  • win7关闭混合睡眠
  • ubuntu x
  • 番茄花园论坛
  • win7系统介绍
  • 怎样修改linux用户名和密码
  • centos常用命令安装
  • linux中复制目录到另一个目录的命令
  • linux查看命令帮助信息的方式
  • cocos2dx小游戏
  • node.js deno
  • linux终端命令行和输出在一行
  • django pypi
  • pycharm怎么学
  • net命令大全
  • nodejs怎么连接mysql
  • android面试基础知识
  • javascript中函数的作用域分为全局作用域
  • jquery鼠标悬停显示内容
  • python django 项目框架图
  • substrate框架原理
  • 河北税务怎么查询交了没有
  • 发票与报销内容不一样
  • 重庆税筹公司
  • 车辆购置税完税证明有用吗
  • 四川省税务局税费服务支持中心工作人员编制
  • 医保未参保怎么参保 支付宝
  • 江苏城市规划
  • 个体户操作流程
  • 税务转为非正常户的后果
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设