位置: IT常识 - 正文

Vue | Vue.js 全家桶 Pinia状态管理(vue全家桶的app项目代码)

编辑:rootadmin
Vue | Vue.js 全家桶 Pinia状态管理

推荐整理分享Vue | Vue.js 全家桶 Pinia状态管理(vue全家桶的app项目代码),希望有所帮助,仅作参考,欢迎阅读内容。

文章相关热门搜索词:vue2.0全家桶,vue2.0全家桶,vue全家桶的app项目代码,vue全家桶教程,vue全局,vue.js 全局运行机制,vue全家桶教程,vue.js 全局运行机制,内容如对您有帮助,希望把文章链接给更多的朋友!

🖥️ Vue .js专栏:Node.js Vue.js 全家桶 Pinia状态管理 🧑‍💼 个人简介:一个不甘平庸的平凡人🍬

✨ 个人主页:CoderHing的个人主页

🍀 格言: ☀️ 路漫漫其修远兮,吾将上下而求索☀️

👉 你的一键三连是我更新的最大动力❤️

目录

一、Pinia和Vuex的对比

什么是Pinia呢?

Pina和Vuex的区别

如何使用Pinia

二、创建Pinia的Store

认识Store

定义一个Store

使用定义的Store

三、Pinia核心概念 State

认识和定义State

操作State(一)

操作State(二)

四、Pinia核心概念 Getters

认识和定义Getters

访问Getters(一)

访问Getters(二)

五、Pinia核心概念 Actions

认识和定义Actions

Actions执行异步操作


一、Pinia和Vuex的对比什么是Pinia呢?

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

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

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

Pina和Vuex的区别

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

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

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

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

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

        如:mutation不再存在:

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

        更友好的TypeScript支持,Vuex之前对TS的支持不是很友好

        不再有modules的嵌套结构:

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

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

如何使用Pinia

安装Pinia

JavaScript yarn add pinia // or with npm npm i pinia

创建一个pinia并且将其传递给应用程序:

JavaScript import { createPinia } from 'pinia'

const pinia = createPinia()

export default pinia

JavaScript // main.js文件中定义 import pinia from './stores/index'

createApp(App).use(pinia).mount('#app')

二、创建Pinia的Store认识Store

什么是Store?

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

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

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

Store有三个核心概念:

        State getters actions

        等同于组件的 data computed  methods

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

定义一个Store

定义一个Store:

        需要知道Store是使用defineStore()定义的

        并且需要一个唯一名称,作为第一个参数传递

JavaScript import { defineStore } from 'pinia'

// defineStore 本身的返回值是一个函数// 习惯用useXXX来命名 => 规范 const useCounter = defineStore("counter",{     state:()=> ({         count:999     }) })

export default useCounter

这个name,也称为id 是必要的的,Pinia使用它来将store连接到devtools

返回的函数统一使用useXXX作为命名方案,这是约定的规范

使用定义的Store

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

JavaScript <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>

Vue | Vue.js 全家桶 Pinia状态管理(vue全家桶的app项目代码)

<style scoped> </style>

注意Store获取到后不能被解构,不然会失去响应式!

        为了从Store中提取属性同时保持其响应式 需要使用storeToRefs()

三、Pinia核心概念 State认识和定义State

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

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

操作State(一)

读取和写入state:

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

JavaScript const counterStore = useCounter()

counterStore.count++ counterStore.name = "xiong"

重置State:

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

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

操作State(二)

改变State:

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

        它允许你使用部分"state"对象 同时应用多个更改

JavaScript function changeStateClick(){     // 1 一个一个修改状态     // userStore.name = "xiaoxiong"     // userStore.age = 18     // userStore.level = 9999

    // 2 一次性修改多个状态     userStore.$patch({       name:"xx",       age:20     })   }

替换State:

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

JavaScript counterStore.$state = {     counter:1,     name:"xxiong" }

四、Pinia核心概念 Getters认识和定义Getters

Getters相当于Store的计算属性:

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

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

JavaScript const useCounter = defineStore("counter",{     state:()=> ({         count:999,         friends:[             { id:1,name:"xiong" },             { id:2,name:"xx" },             { id:3,name:"xxiong" },         ]     }),     getters:{         // 1 基本使用         doubleCount(state){             return state.count * 2         },         // 2 一个getter引入另外一个getter         doubleCountAddOne(){             // 通过this访问 this绑定store实例             return this.doubleCount + 1         },         // 3 getters也支持返回一个函数         getFriendById(state){             return function(id) {                 // 高阶js写法                 return state.friends.find(item => item.id === id )

                // 普通写法                 // for(let i = 0;i<state.friends.length;i++){                 //     const friend = state.friends[i]                 //     if(friend.id === id){                 //         return friend                 //     }                 // }             }         },         // 4 getters中使用到别的store中的数据         showMsg(state){             // 展示 count  和 user内的信息             // 在上面 导入 user包             // 1 获取user信息             const useStore = useUser()             // 2 获取自己信息 state

            // 3 拼接信息             return `name:${useStore.name}-count:${state.count}`         }              } })

访问Getters(一)

访问当前Store的Getters:

JavaScript <h2>doubleCount: {{ countStore.doubleCount }}</h2> <h2>doubleCountAddOne: {{ countStore.doubleCountAddOne }}</h2> <h2>friend-2: {{ countStore.getFriendById(2) }}</h2> <h2>拼接counter里面的count和user里面的名字: showMsg:{{ countStore.showMsg }}</h2>

Getters中访问自己的其他Getters:

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

JavaScript doubleCountAddOne(){     // 通过this访问 this绑定store实例     return this.doubleCount + 1 },

访问其他store的Getters:

JavaScript// 4 getters中使用到别的store中的数据 showMsg(state){     // 展示 count  和 user内的信息     // 在上面 导入 user包     // 1 获取user信息     const useStore = useUser()     // 2 获取自己信息 state

    // 3 拼接信息     return `name:${useStore.name}-count:${state.count}` }

访问Getters(二)

Getters也可以返回一个函数

JavaScript  // 3 getters也支持返回一个函数 getFriendById(state){     return function(id) {         // 高阶js写法         return state.friends.find(item => item.id === id )

        // 普通写法         // for(let i = 0;i<state.friends.length;i++){         //     const friend = state.friends[i]         //     if(friend.id === id){         //         return friend         //     }         // }     } },

五、Pinia核心概念 Actions认识和定义Actions

Actions相当于组件中的methods

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

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

JavaScript actions:{     // 用来定义方法,这里不会给我们传进来一个state,     // 他用来传递参数     increment() {         this.count++     },     // 如:下示例     incrementAdd(num){         this.count += num     } }

Actions执行异步操作

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

JavaScript  actions:{     async fetchHomeMultidata(){         const res = await fetch("http://xxxx:8000/home/")         const data = await res.json()         // console.log(data) // 拿到数据         this.banners = data.data.banner.list         this.recommends = data.data.recommend.list     } }

本文链接地址:https://www.jiuchutong.com/zhishi/296106.html 转载请保留说明!

上一篇:对Transformer中Add&Norm层的理解(transformer中的参数)

下一篇:Win11电源高性能模式怎么开?Win11电源高性能模式设置方法(win11电源高性能模式代码)

  • iqoo8pro怎么投屏(iQOO8Pro怎么投屏到电脑上)

    iqoo8pro怎么投屏(iQOO8Pro怎么投屏到电脑上)

  • 批量下载网页图片(批量下载网页图片的手机浏览器)

    批量下载网页图片(批量下载网页图片的手机浏览器)

  • 魅族媒体音量自动归零(魅族音量键设置媒体音量)

    魅族媒体音量自动归零(魅族音量键设置媒体音量)

  • 为了您的微信安全暂不能绑定手机(为了您的微信安全暂时不能绑定手机)

    为了您的微信安全暂不能绑定手机(为了您的微信安全暂时不能绑定手机)

  • 固态硬盘无法识别怎么办?(固态硬盘无法识别如何提取数据)

    固态硬盘无法识别怎么办?(固态硬盘无法识别如何提取数据)

  • 一个手机可以登录两个抖音号吗(一个手机可以登录两个支付宝吗)

    一个手机可以登录两个抖音号吗(一个手机可以登录两个支付宝吗)

  • 曾经发的朋友圈照片无法加载(曾经发的朋友圈不见了)

    曾经发的朋友圈照片无法加载(曾经发的朋友圈不见了)

  • 为什么mp3下载的歌曲不能播放(为什么mp3下载的视频不能播放)

    为什么mp3下载的歌曲不能播放(为什么mp3下载的视频不能播放)

  • 双频千兆路由器什么意思(移动双频千兆路由器)

    双频千兆路由器什么意思(移动双频千兆路由器)

  • 钉钉删好友是互删吗(钉钉我删除好友后好友列表里还有我吗)

    钉钉删好友是互删吗(钉钉我删除好友后好友列表里还有我吗)

  • airpods不显示弹窗(airpods没显示弹窗)

    airpods不显示弹窗(airpods没显示弹窗)

  • wps中格式在哪(wps2019格式在哪)

    wps中格式在哪(wps2019格式在哪)

  • 小米cc9e可以用内存卡吗(小米cc9e可以用120w快充吗)

    小米cc9e可以用内存卡吗(小米cc9e可以用120w快充吗)

  • 拼多多差评如何取消(拼多差评怎么评)

    拼多多差评如何取消(拼多差评怎么评)

  • 属于外部储存器的是(下列存储器中,属于外部存储器的是____)

    属于外部储存器的是(下列存储器中,属于外部存储器的是____)

  • 总线主要由什么三部分组成(总线主要由什么决定的)

    总线主要由什么三部分组成(总线主要由什么决定的)

  • 电脑13.3寸是多少厘米(13.3寸电脑是多少cm)

    电脑13.3寸是多少厘米(13.3寸电脑是多少cm)

  • ipv6的地址总数为多少(ipv6的地址总数是ipv4的几倍)

    ipv6的地址总数为多少(ipv6的地址总数是ipv4的几倍)

  • 微信聊天内容如何导出(微信聊天内容如何恢复)

    微信聊天内容如何导出(微信聊天内容如何恢复)

  • word尾注怎么设置标号(word尾注怎么设置编号格式)

    word尾注怎么设置标号(word尾注怎么设置编号格式)

  • 苹果暗黑模式怎么打开(苹果暗黑模式怎么调)

    苹果暗黑模式怎么打开(苹果暗黑模式怎么调)

  • 如何装路由器(光猫分出来的网线如何装路由器)

    如何装路由器(光猫分出来的网线如何装路由器)

  • haptic touch是什么(haptic touch有什么用)

    haptic touch是什么(haptic touch有什么用)

  • 线上推广方式(线上推广方式都有哪些)

    线上推广方式(线上推广方式都有哪些)

  • 淘宝pc端是什么意思(淘宝pc版是什么)

    淘宝pc端是什么意思(淘宝pc版是什么)

  • 穿越火线封号查询以及解除封号的方法是什么?(穿越火线封号查询官网)

    穿越火线封号查询以及解除封号的方法是什么?(穿越火线封号查询官网)

  • 孕妇可以喝蜂蜜吗(孕妇可以喝蜂蜜水吗?)

    孕妇可以喝蜂蜜吗(孕妇可以喝蜂蜜水吗?)

  • 最奢华的iPad3是什么(ipad3性价比)

    最奢华的iPad3是什么(ipad3性价比)

  • 免交增值税怎么账务处理
  • 私人大额转账要到柜台办理吗
  • 应纳所得税额的税率
  • 企业个人所得税税率表2023
  • 计提利息要计提手续费吗
  • 自然人密码怎么注册
  • 存货跌价准备影响当期损益吗
  • 提存计划和受益计划选那个
  • 本期应补退税额怎么算
  • 其他应付款长期挂账如何处理
  • 收到的印花税退税怎么会计处理
  • 建筑企业发生分包业务如何确认收入
  • 签订代销合同的人有没有退货权
  • 施工企业暂估成本税前扣除
  • 购买的员工福利需要缴纳印花税
  • 付出的房屋押金可以退吗
  • 年金计算个税需要扣除吗
  • 工程结算与工程施工
  • 补交以前年度增值税和滞纳金怎么开票
  • 小规模纳税人季度销售额不超过30万免征
  • 房屋租赁合同如何办理
  • 工程未结算能主张工程款吗
  • 资产减值损失能否在所得税税前扣除
  • 购买方现金折扣计入什么科目
  • 鸿蒙系统如何删除桌面图标
  • 静态回收期计算方法例子
  • 收到母公司的投资款
  • 广告传媒公司的成本是什么
  • 建筑企业如何预缴企业所得税
  • deepin声音
  • php实现购物车功能的方法
  • 专项应付款费用化
  • php特性包括
  • 缴纳增值税的会计处理方法
  • php写文件函数
  • thinkphp技巧
  • php重定向伪造referer
  • defaultpool
  • 小微企业增值税免税政策2023年
  • 工会经费按工资总额的
  • 帝国cms要授权吗知乎
  • phpcms怎么用
  • 软件企业增值税计算
  • 销售折扣现金流量表
  • 固定资产转在建工程
  • 外资企业国内审批手续繁琐
  • 商品流通企业的含义
  • 个体户开出的发票没跟对方说自己冲红了怎么办
  • 专项储备期末有余额吗
  • 如何设置长期有效的二维码
  • 缴税零申报
  • sql2000数据库怎么删除数据
  • 暂估成本跨年后收到票可以直接附在暂估凭证
  • 公司对公账户转给个人
  • 个人独资企业需要缴纳哪些税种
  • 增值税附加税的计算基数
  • 安防工程注意事项有哪些
  • 预付账款年底怎么调账
  • 应交税费要计提吗?
  • 应付未付款项
  • 累计折旧余额在哪方
  • mysqldumpslow
  • redhat系统安装gvim
  • 将IBM ServeRAID 8i卡的驱动整合到Win2003安装光盘里
  • windows10bug严重
  • xp系统光盘读不出来
  • movie是什么文件
  • android系统架构图
  • 很不错的成语
  • 人工智能最受欢迎的一门编程语言
  • NGUI之UITab Bar的不能将Sprite与SelectedSprite设置成相同的精灵
  • gpu解码视频
  • python编写一个模块
  • 西安市经开区管委会官网
  • 我国税务师事务所有哪些
  • 发票专用章盖在哪里
  • 税盘数字证书密码怎么查看
  • 柴油增值税发票
  • 税收超额负担图解
  • 查询产品真伪怎么查询app
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设