Vue状态管理--Pinia使用详解
一、Pinia概述
Pinia
开始于大概2019年,最初作为一个实验为Vue
重新设计状态管理,让它用起来像组合API
。
Pinia
本质上依然是一个状态管理的库,用于跨组件、页面进行状态共享(这点和Vuex
、Redux
一样)。
Pinia
(发音为/piːnjʌ/
,如英语中的peenya
)是最接近piña
(西班牙语中的菠萝)的词。
这可能也是Pinia
的图标是一个菠萝的原因。
二、Pinia和Vuex的区别
Pinia
最初是为了探索 Vuex
的下一次迭代会是什么样子,结合了 Vuex 5
核心团队讨论中的许多想法。
最终,团队意识到Pinia
已经实现了Vuex5
中大部分内容,所以最终决定用Pinia
来替代Vuex
。
和Vuex相比,Pinia有很多的优势:
mutations
不再存在更友好的
TypeScript
支持,Vuex
之前对TS
的支持很不友好不再有
module
s的嵌套结构,可以灵活使用每一个store
,它们是通过扁平化的方式来相互使用的不再有命名空间的概念,不需要记住它们的复杂关系
三、Pinia的安装和基本配置
3.1 安装Pinia
# npm 方式
npm install pinia
# yarn 方式
yarn add pinia
3.2 创建一个pinia并且将其传递给应用程序
1)新建store文件夹,在此文件夹下新建一个index.js
import { createPinia } from 'pinia'
//创建一个pinia实例
const pinia = createPinia()export default pinia
2)在main.js中use它
import { createApp } from 'vue'
import App from './App.vue'import pinia from './stores'
createApp(App).use(pinia).mount('#app')
完成上述代码后,pinia在项目中就生效了
四、Pinia中的Store
4.1 什么是Store?
一个
Store
(如Pinia
)是一个实体,它会持有绑定到你组件树的状态和业务逻辑,即保存了全局的状态;它有点像始终存在,并且每个人都可以读取和写入的组件;
你可以在你的应用程序中定义任意数量的
Store
来管理你的状态;
Store
有三个核心概念: state
、getters
、actions
。
等同于组件的data
、computed
、methods
。
一旦 store
被实例化,你就可以直接在 store
上访问 state
、getters
和 actions
中定义的任何属性。
4.2 如何定义一个store
定义之前需要知道:
store
是使用defineStore()
定义的并且它需要一个唯一名称,作为第一个参数传递
这个 唯一名称
name
,也称为id
,是必要的,Pinia
使用它来将store
连接到devtools
返回的函数统一使用
useX
作为命名方案,这是约定的规范
具体示例:
定义一个counter.js
,在里面定义一个store
// 定义关于counter的store
import { defineStore } from 'pinia'const useCounter = defineStore("counter", {// 在 Pinia 中,状态被定义为返回初始状态的函数state: () => ({count: 99})})export default useCounter
这里有一个注意点,就是defineStore
函数的返回值的命名规则:
以use
开头,加上传给defineStore
函数的第一个参数组成,使用驼峰命名法。
这虽然不是强制,确是一个大家都遵守的规范。
4.3 使用store读取和写入 state:
<template><div class="home"><h2>Home View</h2><!-- 2.使用useCounter的实例获取state中的值 --><h2>count: {{ counterStore.count }}</h2><h2>count: {{ count }}</h2></div>
</template><script setup>import useCounter from '@/stores/counter';import { storeToRefs } from 'pinia'// 1.直接使用useCounter获取counter这个Store的实例// 这个函数名称取决于defineStore的返回值const counterStore = useCounter()// 使用storeToRefs对数据进行结构,让count保持响应式的效果const { count } = storeToRefs(counterStore)// 3.修改(写入)storecounterStore.count++
</script>
store
在它被使用之前是不会创建的,我们可以通过调用use
函数来使用store
。
Pinia
中可以直接使用store
实例去修改state
中的数据,非常方便。
注意:
store
获取到后不能被解构,因为会让数据失去响应式。
为了从 store
中提取属性同时保持其响应式,需要使用storeToRefs()
。
4.4 修改state的多种方式
1)定义一个关于user的Store
import { defineStore } from 'pinia'const useUser = defineStore("user", {state: () => ({name: "why",age: 18,level: 100})
})export default useUser
2)三种修改state的方式
<script setup>import useUser from '@/stores/user'import { storeToRefs } from 'pinia';const userStore = useUser()const { name, age, level } = storeToRefs(userStore)function changeState() {// 1.一个个修改状态// userStore.name = "kobe"// userStore.age = 20// userStore.level = 200// 2.一次性修改多个状态// userStore.$patch({// name: "james",// age: 35// })// 3.替换state为新的对象const oldState = userStore.$stateuserStore.$state = {name: "curry",level: 200}// 下面会返回trueconsole.log(oldState === userStore.$state)}
</script>
4.5 重置store
<script>import useCounter from '@/stores/counter';const counterStore = useCounter()counterStore.$reset()
</script>
五、getters的使用
Getters
相当于Store
的计算属性:
它可以用
defineStore()
中的getters
属性定义;getters
中可以定义接受一个state
作为参数的函数;
5.1 定义getters
// 定义关于counter的store
import { defineStore } from 'pinia'const useCounter = defineStore("counter", {state: () => ({count: 99}),getters: {// 基本使用doubleCount(state) {return state.count * 2},// 2.一个getter引入另外一个getterdoubleCountAddOne() {// this是store实例,可以直接使用另一个getterreturn this.doubleCount + 1},// 3.getters也支持返回一个函数getFriendById(state) {return function(id) {for (let i = 0; i < state.friends.length; i++) {const friend = state.friends[i]if (friend.id === id) {return friend}}}},},
})export default useCounter
5.2 访问getters
<template><div class="home"><!-- 在模板中使用 --><h2>doubleCount: {{ counterStore.doubleCount }}</h2><h2>doubleCountAddOne: {{ counterStore.doubleCountAddOne }}</h2><h2>friend-111: {{ counterStore.getFriendById(111) }}</h2></div>
</template><script setup>import useCounter from '@/stores/counter';const counterStore = useCounter()// 在js文件中使用const doubleCount = counterStore.doubleCount;const doubleCountAddOne = counterStore.doubleCountAddOne;const frend = counterStore.getFriendById(111)
</script>
5.3 getters中获取另一个store中的state/getters数据
// 定义关于counter的store
import { defineStore } from 'pinia'// 引入另一个store
import useUser from './user'const useCounter = defineStore("counter", {state: () => ({count: 99,}),getters: {// 4.getters中用到别的store中的数据showMessage(state) {// 1.获取user信息const userStore = useUser()// 2.获取自己的信息// 3.拼接信息(使用另一个store中的数据)return `name:${userStore.name}-count:${state.count}`}}
})export default useCounter
六、actions的使用
actions
相当于组件中的 methods
。
可以使用defineStore()
中的actions
属性定义,并且它们非常适合定义一些业务逻辑。
和getters
一样,在action
中可以通过this
访问整个store
实例的所有操作。
6.1 基本定义方式
// 定义关于counter的store
import { defineStore } from 'pinia'const useCounter = defineStore("counter", {state: () => ({count: 99,}),// 定义actionsactions: {increment() {this.count++},incrementNum(num) {this.count += num}}
})export default useCounter
6.2 基本使用方式
<template><div class="home"><h2>doubleCount: {{ counterStore.count }}</h2><button @click="changeState">修改state</button></div>
</template><script setup>import useCounter from '@/stores/counter';const counterStore = useCounter()function changeState() {// 可以通过counterStore对象直接使用// counterStore.increment()counterStore.incrementNum(10)}</script>
6.3 Actions中的异步操作
import { defineStore } from 'pinia'const useHome = defineStore("home", {state: () => ({banners: [],recommends: []}),actions: {async fetchHomeMultidata() {const res = await fetch("http://123.207.32.32:8000/home/multidata")const data = await res.json()//得到数据后直接复制给statethis.banners = data.data.banner.listthis.recommends = data.data.recommend.listreturn 'success'}}
})export default useHome
6.4 调用异步actions方法
<script setup>import useHome from '@/stores/home';const homeStore = useHome()homeStore.fetchHomeMultidata().then(res => {console.log("fetchHomeMultidata的action已经完成了:", res)})</script>
Vue状态管理--Pinia使用详解相关推荐
- Pinia下一代vue状态管理工具
建议大家结合上一篇文章学习:vite+vue script setup语法糖写法:style'me的个人博客 1.pinia是什么? Pinia是一个围绕Vue 3 Composition API的 ...
- php动态写入vue,Vue自定义动态组件使用详解
这次给大家带来Vue自定义动态组件使用详解,Vue自定义动态组件的注意事项有哪些,下面就是实战案例,一起来看一下. 现在基于vue的UI组件库有很多,比如iview,element-ui等.但有时候这 ...
- Vue状态管理vuex
转: https://www.cnblogs.com/xiaohuochai/p/7554127.html 前面的话 由于多个状态分散的跨越在许多组件和交互间各个角落,大型应用复杂度也经常逐渐增长.为 ...
- ElasticSearch最全详细使用教程:入门、索引管理、映射详解、索引别名、分词器、文档管理、路由、搜索详解...
墨墨导读:之前我们分享了ElasticSearch最全详细使用教程:入门.索引管理.映射详解,本文详细介绍ElasticSearch的索引别名.分词器.文档管理.路由.搜索详解. 一.索引别名 1. ...
- ElasticSearch最全详细使用教程:入门、索引管理、映射详解
墨墨导读:本文介绍了ElasticSearch的必备知识:从入门.索引管理到映射详解. 一.快速入门 1. 查看集群的健康状况http://localhost:9200/_cat http://loc ...
- Linux服务器,服务管理--systemctl命令详解,设置开机自启动
Linux服务器,服务管理--systemctl命令详解,设置开机自启动 syetemclt就是service和chkconfig这两个命令的整合,在CentOS 7就开始被使用了. 摘要: syst ...
- Linux进程管理工具 Supervisor详解
介绍 Supervisor安装与配置(linux/unix进程管理工具) Supervisor(http://supervisord.org)是用Python开发的一个client/server服务, ...
- 系统批量运维管理器Fabric详解
系统批量运维管理器Fabric详解 Fabrici 是基于python现实的SSH命令行工具,简化了SSH的应用程序部署及系统管理任务,它提供了系统基础的操作组件,可以实现本地或远程shell命令,包 ...
- 【云原生之k8s】k8s管理工具kubectl详解
[云原生之k8s]k8s管理工具kubectl详解 前言 一.陈述式管理 (1)陈述式资源管理方法 (2)k8s相关信息查看 ①查看版本信息 ②查看节点信息 ③查看资源对象简写 ④查看集群信息 ⑤配置 ...
最新文章
- 你的Windows电脑里有哪些效率翻倍的生产力软件?
- SpringBoot2.x教程--整合使用jOOQ面向对象查询
- 高糊马赛克秒变高清,表情帝:这还是我吗?
- MyEclipse的build、clean、publish、clean(redeploy)的区别
- 2022 年“苹果学者”名单公布,4 位华人学生位列其中
- Python3常用字符串操作
- Oracle-常见的错误
- php streamsocketenablecrypto,PHPMailer发送邮件报错Msg:stream_socket_enable_crypto():
- C++变量初始化问题
- 【FPGA的基础快速入门22-------OV7725摄像头模块】
- 材料成型过程计算机控制系统,材料成型及控制工程专业解读_材料成型及控制工程专业介绍_材料成型及控制工程专业开设课程-高考圈...
- 微信小程序——订阅号和服务号区别
- wpa_supplicant状态机
- 局域网中的通信子网和资源子网
- 传感器技术—湿敏电阻式传感器(学习笔记五)
- emacs-打开和关闭
- 致远oa打开mysql密码是多少钱_致远OA V5版本系统预置用户密码恢复方法
- adb命令启动某个action_各种启动命令
- YOLOv5改进之十三:主干网络C3替换为轻量化网络EfficientNetv2
- 本周内外盘行情回顾2022.3.6
热门文章
- 在windows下如何配置RTT开发环境?
- Editor.md 的Markdown 编辑器集成与使用(全)
- 西安天讯:怎样添加百度蜘蛛访问网站日志log日志
- PHP开发手机自动拨号软件
- 论文中看到的光线投影法(ray casting)是什么?
- GB28181国标流媒体服务中设备目录查询步骤及信令示例
- Qno侠诺中小型企业ERP远程接入方案(转)
- ORA-00600 [ktspgfb-1]
- Elasticsearch6.5+Kibana6.5+Logstash6.5 下载|部署|使用
- 1u服务器最多多少内存条,高密度节省空间 四款1U机架式服务器推荐