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

  • 华为手机怎么出厂时间(华为手机怎么出现下面的3个选择键)

    华为手机怎么出厂时间(华为手机怎么出现下面的3个选择键)

  • 如何共享文件(不同网络的电脑如何共享文件)

    如何共享文件(不同网络的电脑如何共享文件)

  • iPhone11原装耳机是无线的吗(苹果11 原装耳机)

    iPhone11原装耳机是无线的吗(苹果11 原装耳机)

  • nceal10是什么机型(nceal00)

    nceal10是什么机型(nceal00)

  • 什么软件能看电视频道(什么软件能看电视)

    什么软件能看电视频道(什么软件能看电视)

  • telegram手机注册不了

    telegram手机注册不了

  • iphone进网许可很重要吗(苹果手机进网许可)

    iphone进网许可很重要吗(苹果手机进网许可)

  • 手机断网怎么解决方法(手机断网怎么解决方法vivo)

    手机断网怎么解决方法(手机断网怎么解决方法vivo)

  • 闲鱼如何才能得到助卖宝卡(闲鱼如何才能得到钱)

    闲鱼如何才能得到助卖宝卡(闲鱼如何才能得到钱)

  • opporeno黑屏按哪都不好使(opporeno黑屏按哪都不好使维修多少钱)

    opporeno黑屏按哪都不好使(opporeno黑屏按哪都不好使维修多少钱)

  • qqpcmgr_docpro文件夹是什么(qqpcmgr_docpro文件怎么恢复)

    qqpcmgr_docpro文件夹是什么(qqpcmgr_docpro文件怎么恢复)

  • oled屏幕多久会烧屏(oled屏幕多久会烧屏知乎)

    oled屏幕多久会烧屏(oled屏幕多久会烧屏知乎)

  • 为什么通话录音只有自己声音(为什么通话录音不能播放)

    为什么通话录音只有自己声音(为什么通话录音不能播放)

  • 蚂蚁视频是什么东西(蚂蚁视频是蚂蚁集团的吗)

    蚂蚁视频是什么东西(蚂蚁视频是蚂蚁集团的吗)

  • 怎么判断苹果基带坏了(怎么判断苹果基带好坏)

    怎么判断苹果基带坏了(怎么判断苹果基带好坏)

  • 抖音超级乐迷是什么东西(抖音超级乐迷是真的吗)

    抖音超级乐迷是什么东西(抖音超级乐迷是真的吗)

  • iphone6s卡屏滑动不了(6sp卡屏幕划不动)

    iphone6s卡屏滑动不了(6sp卡屏幕划不动)

  • 为什么电脑qq和手机qq不同步(为什么电脑qq和手机qq头像不一样)

    为什么电脑qq和手机qq不同步(为什么电脑qq和手机qq头像不一样)

  • a1691能用电信吗(a1690可以用电信卡吗)

    a1691能用电信吗(a1690可以用电信卡吗)

  • vsco包年会员怎么取消(vsco怎么取消订阅)

    vsco包年会员怎么取消(vsco怎么取消订阅)

  • 怎么关掉windows安全中心(怎么关掉windows许可证即将过期的提示)

    怎么关掉windows安全中心(怎么关掉windows许可证即将过期的提示)

  • 上传视频怎么赚钱(上传视频怎么赚钱手机平台)

    上传视频怎么赚钱(上传视频怎么赚钱手机平台)

  • 为什么微博不能发帖(为什么微博不能改名字)

    为什么微博不能发帖(为什么微博不能改名字)

  • 一加7pro尺寸(一加7pro的长度和宽是多少厘米)

    一加7pro尺寸(一加7pro的长度和宽是多少厘米)

  • 如何从Windows11回滚到Windows10?回滚后Win11自动安装解决办法(win11怎么回到10)

    如何从Windows11回滚到Windows10?回滚后Win11自动安装解决办法(win11怎么回到10)

  • 移动网速测试的方法是什么?(移动手机网速测试)

    移动网速测试的方法是什么?(移动手机网速测试)

  • 所得税会计与财务会计比较研究
  • 计算应纳税所得额时 不得扣除支出有哪些
  • 税负转嫁的概念是什么
  • 转租价格由谁决定
  • 个人开票的抬头怎么写
  • 增值税发票已抵扣能否认定合同关系
  • 折现率怎么确定 公式
  • 如何使用发票对冲个人所得税
  • 抵押贷款买房子合适还是商业贷款合适
  • 处置车辆收入缴税规定
  • 迟延履行利息记什么科目?
  • 客户把发票弄丢了,红冲重新开了会有什么风险
  • 老板报销没有发票怎么办
  • 企业购房房产税土地税补缴
  • 地产商自持是什么意思
  • 委托加工费的增值税计入成本吗
  • 发票冲红有时间要求吗
  • 个体工商户需要做账吗
  • 委托贷款利息收入增值税
  • 印花税查账征收和核定征收计算
  • 存商品入成原材料怎么改?
  • 营业外支出的税额要进项转出吗
  • 文化事业建设费2023年是否减免了
  • 工业危废处理的前景
  • hypertrm.exe系统错误
  • 收到外单位委托办事的资金应该计入
  • ksysslim.exe是什么
  • 在筹建期间发生的开办费
  • 利用php判断文件是否存在
  • axios请求数据的数据类型
  • 著作权费用
  • 逾期包装物押金收入计入什么科目
  • 债券发行的分录
  • 城市维护建设税属于什么会计科目
  • 个税申报的本期收入是应发工资吗
  • mysql5.7性能优化
  • 公司签发银行承兑汇票的行为属于什么
  • 金蝶迷你版怎么打印明细账
  • 固定资产清理包括什么会计科目
  • 融资租入的固定资产视为自有固定资产
  • mysql将两个查询结果合并到一起
  • 进项税多记了怎么调账
  • 商业一般纳税人辅导期截止时间
  • 投资性房地产进项税抵扣
  • 农民专业合作社法
  • 股东所有者权益负数
  • 无形资产如何做账务处理
  • 社保刚转回来,生孩子能报销吗
  • 一正一负发票要做凭证吗
  • 进项税额准予抵扣是什么意思
  • 应收账款多收了退回怎么做账
  • 股东分红算不算成本费用
  • 什么是交易价格指数
  • 财政返还什么意思
  • 税审报告一定要税所主任签吗
  • sqlserver多行转多列
  • 查看linux服务器内存命令
  • mysql获取当前时间
  • 微软补丁修复时出现蓝屏现象
  • mac虚拟机安装教程win10正版
  • 硬盘安装ubuntu18
  • winlogon是什么意思
  • WinCtlAdAlt.exe - WinCtlAdAlt是什么进程
  • windows log在哪里
  • win7系统鼠标指针异常
  • w7系统如何设置
  • win10怎么打开ie浏览器的兼容模式
  • linux openfoam
  • cocos2dx入门
  • 模板创造
  • IE下href 的 BUG问题
  • android 中 EditText加入图标 更改边框颜色 设置透明
  • ShareSdk实现第三方分享功能
  • 个人进口关税税率
  • 苏州昆山税务局电话号码
  • 智云发票集中管理云平台官网
  • 芜湖买房退契税在哪里退
  • 进项税销项税抵扣公式
  • 广东省国家税务总局稽查局局长
  • 税务局自助终端
  • 免责声明:网站部分图片文字素材来源于网络,如有侵权,请及时告知,我们会第一时间删除,谢谢! 邮箱:opceo@qq.com

    鄂ICP备2023003026号

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

    友情链接: 武汉网站建设