位置: 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电源高性能模式代码)

  • 怎样经营微信营销才能消除消费者被压迫感觉(微信经营四步走)

    怎样经营微信营销才能消除消费者被压迫感觉(微信经营四步走)

  • 谷歌浏览器截图(谷歌浏览器 迅雷)(谷歌浏览器截图快捷键)

    谷歌浏览器截图(谷歌浏览器 迅雷)(谷歌浏览器截图快捷键)

  • 高德地图怎么注册快车司机(高德地图怎么注销账号)

    高德地图怎么注册快车司机(高德地图怎么注销账号)

  • 手机内屏出现紫色扩散怎么办(手机内屏出现紫色扩散能坚持多久)

    手机内屏出现紫色扩散怎么办(手机内屏出现紫色扩散能坚持多久)

  • 网络聊天ns是什么意思呀?(网络ns是什么意思啊)

    网络聊天ns是什么意思呀?(网络ns是什么意思啊)

  • 斗鱼怎么提现直播收益(斗鱼主播在哪里提现)

    斗鱼怎么提现直播收益(斗鱼主播在哪里提现)

  • 个人订阅号怎么挣钱(个人订阅号怎么转成企业订阅号)

    个人订阅号怎么挣钱(个人订阅号怎么转成企业订阅号)

  • 给对方打电话延迟十几秒才响(给对方打电话延迟十几秒才响是信号不好吗)

    给对方打电话延迟十几秒才响(给对方打电话延迟十几秒才响是信号不好吗)

  • 声卡和音响怎么连接(声卡和音响怎么连一个手机)

    声卡和音响怎么连接(声卡和音响怎么连一个手机)

  • 蓝牙3.0和5.0区别(蓝牙3.0和5.0的区别)

    蓝牙3.0和5.0区别(蓝牙3.0和5.0的区别)

  • 苹果手机转换器怎么用(苹果手机转换器插上没反应)

    苹果手机转换器怎么用(苹果手机转换器插上没反应)

  • dpi信息异常,可将图片另存什么意思(dpi信息异常是什么意思)

    dpi信息异常,可将图片另存什么意思(dpi信息异常是什么意思)

  • 文档怎么加入空白页(文档中怎么加入空白行word2019)

    文档怎么加入空白页(文档中怎么加入空白行word2019)

  • iphone照片处理工具怎么打开(iphone照片处理工具在哪里)

    iphone照片处理工具怎么打开(iphone照片处理工具在哪里)

  • 腾讯视频怎么下载视频(腾讯视频怎么下载到u盘)

    腾讯视频怎么下载视频(腾讯视频怎么下载到u盘)

  • 下载好的ppt模板如何使用(免费的ppt模板下载网站)

    下载好的ppt模板如何使用(免费的ppt模板下载网站)

  • 手机系统怎么回退(手机系统怎么回退到前一个版本)

    手机系统怎么回退(手机系统怎么回退到前一个版本)

  • 手机qq怎么临时对话(qq登录新手机怎么恢复聊天记录)

    手机qq怎么临时对话(qq登录新手机怎么恢复聊天记录)

  • 哔哩哔哩在手机哪个文件夹(哔哩哔哩在手机存储的哪个位置)

    哔哩哔哩在手机哪个文件夹(哔哩哔哩在手机存储的哪个位置)

  • 笔记本电脑怎么加内存(笔记本电脑怎么录屏幕视频带声音)

    笔记本电脑怎么加内存(笔记本电脑怎么录屏幕视频带声音)

  • iphone x壁纸怎么缩小(苹果x壁纸怎么动起来)

    iphone x壁纸怎么缩小(苹果x壁纸怎么动起来)

  • 苹果x不贴膜会刮花吗(苹果x不贴膜会怎么样)

    苹果x不贴膜会刮花吗(苹果x不贴膜会怎么样)

  • 10w快充有多快(100w快充有多快)

    10w快充有多快(100w快充有多快)

  • cad图纸1比50什么意思(cad图纸1:50怎么计算)

    cad图纸1比50什么意思(cad图纸1:50怎么计算)

  • 朋友三天可见如何设置(朋友仅三天可见可以对个别人设置吗)

    朋友三天可见如何设置(朋友仅三天可见可以对个别人设置吗)

  • troff命令  格式化打印机和字符终端的文本(trace 命令用法)

    troff命令 格式化打印机和字符终端的文本(trace 命令用法)

  • lha命令  压缩或解压文件(压缩的命令)

    lha命令 压缩或解压文件(压缩的命令)

  • 固定资产的折余价值计算公式
  • 安全生产费实际发生必须是付款吗还是挂帐也可以
  • 专款专用需要缴纳企业所得税吗?
  • 返利应计入什么科目
  • 工程预缴税款流程
  • 医疗设备的折旧年限是多少年
  • 纳税人识别号的组成
  • 在哪里报个税
  • 股东个人固定资产怎么查
  • 公司欠增值税如何补交?
  • 什么费用计入什么科目
  • 以前年度少计提工资的会计处理
  • 员工销售家具取得的工资怎么写分录?
  • 如何查询对方是不是老赖
  • 公司注销时资本要交税吗
  • 代驾公司增值税怎么交
  • 年底结账税金
  • 增值税税控系统技术维护费计入什么科目
  • 融资租赁收到租金不确认收入
  • 借款利息不能抵扣进项税
  • 发票冲红还需要作废吗
  • 决算帐表不相符怎么处理
  • 外籍人员在境内取得所得在我国应该计征个人所得税
  • 纺织厂收购棉花如何计税?
  • 个税起征点是
  • 利息支出怎么结转
  • 园林绿化工程公司有哪些
  • 职工社保调整
  • 合伙企业 投资
  • 常见的电脑系统类型
  • php生成app
  • 路由器密码忘了怎么查到
  • 安置房项目需要环评吗
  • 增值税 劳务费
  • mis.off c n
  • 银行存款账面余额与银行账户余额
  • 工业企业制造费用包括
  • 出口货物视同内销征税的会计核算?
  • 宝塔主机分销系统设计
  • 企业接受投资者投资,投资者超额缴入的资本
  • 高效刷题app
  • 预付账款的会计编码是多少?
  • 小规模差额征税的账务处理
  • 外来原始凭证包括一次凭证,累计凭证和汇总凭证
  • 子公司注销母公司投资损失企业所得税
  • 房产税的纳税义务人是征税范围内房屋产权所有人
  • 文化事业建设费的征收标准
  • 职业年金是不是养老保险
  • 有借款合同还要写借条吗
  • 固定资产清理在贷方怎么结转
  • 企业房屋折旧年限是多少
  • 日常费用报销表格
  • t3用友年底结束怎么建下一年
  • 年末净利润为负说明什么
  • innodb_sys_tables
  • xp系统登录界面登录管理员账号
  • centos8 bond0
  • 文件夹字体变成蓝色怎么恢复
  • windows7 excel
  • win10英文版系统怎么改成中文
  • windows 10 mobile--移动版
  • vsftpd怎么配置
  • win8控制面板怎么打开
  • unity3d第三人称角色控制器
  • android属性大全
  • windows如何进行批处理
  • python中的\r
  • unity游戏开发的技术
  • 安卓手机 监听功能
  • python中的range和arange
  • 实例分析法名词解释
  • jquery easyui有哪些特点
  • Python黑魔法手册
  • 党建引领结对共建生态
  • 文化事业建设税减免政策2023
  • 全国砂石供应紧缺
  • 湖南银税进件中心
  • 国有企业全面改革方案
  • 电子税务局密钥不一致
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设