pinia学习
1.安装
yarn add pinia
OR 使用npm
npm install pinia
pinia是Vue的存储库,允许跨组件/页面共享状态。
pinia和vuex的作用一样,充当一个存储数据的作用,存储在pinia的数据允许我们在各个组件中使用。
pinia优点:
1.pinina只有state,getter,action。
2.pinia中action支持同步和异步,vuex不支持【vue2中action是异步的去commit操作,而mutations是同步的】。
3.良好的Typescript支持
4.无需创建各个模块嵌套,pinia中每个store都是独立的,互相不影响。
5.体积非常小,只有1kb左右
6.pinia支持插件来扩展自身功能
7.支持服务端渲染
2.创建一个pinia实例(根store)并将其传递给应用
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app');
3.Store
store 是一个保存状态和业务逻辑的实体。
有三个概念: state, getter, action。
4.创建一个store例子
// stores/count.js
store 是用 defineStore() 定义的,他的第一个参数要求是一个独一无二的名字:
import { defineStore } from 'pinia';
export const useCountStore = defineStore('main',{
// 其他配置...
state:()=>({
count: 0
}),
getters:{
double: (state)=>state.count * 2
},
actions: {
increment(){
this.count++;
}
}
})
使用方式:
//some.vue
<script setup>
import useCountStore from '@/stores/count'
import { computed } from 'vue'
import {storeToRefs} from 'pinia';//为了从store中提取属性时保持其响应式,需要引入 storeToRefs
const counter = useCountStore();
const { count } = storeToRefs(counter);
const { increment } = counter;
counter.count++;
counter.increment();
//OR
counter.$patch({ count: counter.count+1 })
const doubleCount = computed(()=> counter.count * 2);
</script>
5.重置state
调用 store的 $reset()方法将state重置为初始值。
例如:
const store = useStore();
store.$reset();
6.举例demo
项目搭建
执行命令:
npm create vite@latest my-vite-app --template vue-ts
运行项目:
npm install
npm run dev
安装pinia(见上文)
npm install pinia
修改main.js,引入pinia提供的createPinia方法,创建根存储。
//main.ts
import { createApp } from 'vue';
import App from './App.vue'
import { createPinia } from 'pinia';
const pinia = createPinia();
const app = createApp(App);
app.use(pinia);
app.mount('#app');
在src目录下新建store文件夹,用来存放创建的各种store,然后在该目录下新建 user.ts 文件,主要用来存放与user相关的store。
//例如:src/store/user.ts
import { defineStore } from 'pinia';
export const userStore = defineStore('user',{
state:()=>({
userInfo:{
name: 'sunnyeve',
age: 18
},
sayHello: 'hello world',
count: 0,
items: []
}),
getters:{ //相当于computed,作用是返回一个新的结果,会被缓存
getDoubleAge:(state)=>{
return state.age * 2;
},
getUserInfo():string{
return this.name + this.getDoubleAge
}
},
actions:{
changeName(name: string){
this.name = name;
}
}
})
//使用store, /src/views/home.vue
<template>
<div>sayhello: {{sayHello}}</div>
<div>{{userInfo.name}}</div>
<div>{{userInfo.age}}</div>
<button @click='changeAge'>点击更改age</button>
<button @click='reset'>重置store</button>
<button @click='patchStore'>批量更改数据</button>
</template>
<script setup lang="ts">
import { userStore } from '@/store/user';
import { storeToRefs } from 'pinia';
const useUserStore = userStore();
const { userInfo, count, sayHello } = storeToRefs(useUserStore);
const changeAge = ()=>{
useUserStore.age++;
}
const reset = ()=>{
useUserStore.$reset();//这个方法会将store中的数据变为初始状态,页面也会更新。
}
const patchStore=()=>{
useUserStore.$patch({
count: 10,
sayHello: 'hello world~~~'
})
}
//也可下面这种写法,原因在于假设state中有些字段无需更改,就可以用$patch方法接收一个回调函数方式解决
useUserStore.$patch((state)=>{
state.items.push({name:'xx', price: 100});
state.hasChanged = true
})
//直接替换整个store, 使用store的$state方法
useUserStore.$state = { name: 'xx', age: 18}
</script>
参考链接:
https://pinia.vuejs.org/zh/getting-started.html - 官方文档
https://zhuanlan.zhihu.com/p/533233367
pinia学习的更多相关文章
- 轻量级状态管理库Pinia试吃
最近连续看了几个GitHub上的开源项目,里面都用到了 Pinia 这个状态管理库,于是研究了一下,发现确实是个好东西!那么,Pinia 的特点: 轻量化 -- Pinia 体积约1KB,十分轻巧 ...
- 在Vue3项目中使用pinia代替Vuex进行数据存储
pinia是一个vue的状态存储库,你可以使用它来存储.共享一些跨组件或者页面的数据,使用起来和vuex非常类似.pina相对Vuex来说,更好的ts支持和代码自动补全功能.本篇随笔介绍pinia的基 ...
- vue下一代状态管理Pinia.js 保证你看的明明白白!
1.pinia的简单介绍 Pinia最初是在2019年11月左右重新设计使用Composition API的 Vue 商店外观的实验. 从那时起,最初的原则相同,但 Pinia 适用于 Vue 2 和 ...
- 结合 Vuex 和 Pinia 做一个适合自己的状态管理 nf-state
一开始学习了一下 Vuex,感觉比较冗余,就自己做了一个轻量级的状态管理. 后来又学习了 Pinia,于是参考 Pinia 改进了一下自己的状态管理. 结合 Vuex 和 Pinia, 保留需要的功能 ...
- Vben Admin 源码学习:项目初始化
0x00 前言 Vue-Vben-Admin 是一个免费开源的中后台模版.使用了最新的vue3,vite2,TypeScript等主流技术开发,开箱即用的中后台前端解决方案考. 本系列本着学习参考的目 ...
- pinia 入门及使用
自上月从上海结束工作回来 在家闲来无事 想写点东西打发时间 也顺便学习学习新的技术.偶然发现了 pinia 据说比vuex好用些 所以便搭了个demo尝试着用了下 感觉确实不错,于是便有了这篇随笔. ...
- Blazor和Vue对比学习(进阶2.2.3):状态管理之状态共享,Blazor的依赖注入和第三方库Fluxor
Blazor没有提供状态共享的方案,虽然依赖注入可以实现一个全局对象,这个对象可以拥有状态.计算属性.方法等特征,但并不具备响应式.比如,组件A和组件B,都注入了这个全局对象,并引用了全局对象上的数据 ...
- vue3中pinia的使用总结
pinia的简介和优势: Pinia是Vue生态里Vuex的代替者,一个全新Vue的状态管理库.在Vue3成为正式版以后,尤雨溪强势推荐的项目就是Pinia.那先来看看Pinia比Vuex好的地方,也 ...
- 从直播编程到直播教育:LiveEdu.tv开启多元化的在线学习直播时代
2015年9月,一个叫Livecoding.tv的网站在互联网上引起了编程界的注意.缘于Pingwest品玩的一位编辑在上网时无意中发现了这个网站,并写了一篇文章<一个比直播睡觉更奇怪的网站:直 ...
- Angular2学习笔记(1)
Angular2学习笔记(1) 1. 写在前面 之前基于Electron写过一个Markdown编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
随机推荐
- C++练习9 函数的重载
函数的重载是用一个函数名定义多个函数,但是这些同名函数的形参列表(参数个数,类型,顺序)必须不同. 函数重载的规则: 1.函数名称必须相同. 2.参数列表必须不同(个数不同.类型不同.参数排列顺序不同 ...
- GoAccess实现请求监
GoAccess实现请求监控 简介 GoAccess是一款开源的实时web日志分析器和交互式查看器,用于可视化查看HTTP统计信息,可以系统的终端上运行,也可以通过浏览器运行: 本文通过使用GoAcc ...
- JZOJ 4320. 【NOIP2015模拟11.5】旅行
题目 思路 不想写了,直接使用 没错,关键就在求第 \(k\) 小的路径 上述提到堆的做法,我们可以用 \(STL\) 的优先队列来实现 只不过常数有点大~~~ \(Code\) #include&l ...
- [IOI2014]friend 朋友
题目传送门 似乎是我的第一篇 IOI 题解? 思路 虽然说是 IOI 题,但是其实并没有那么难. 这个题目描述比较杂乱,简单的描述就是:给你一些关系,你需要选出一些点,使这些点的权值和最大,并且这些点 ...
- liunx Ubuntu20.04怎么安装mysql
转载csdn:优秀的处女座 https://blog.csdn.net/qq_42481794/article/details/113923803
- php .inc 文件
inc 文件顾名思义是include file的意思.即PHP的包含文件,这里用后缀来表示文件的作用, inc文件一般加载一些设置 举个例子 <? php//这里是数据库连接的配置信息db. ...
- 如何获取win10用户最高权限
第五步,在(输入对象名称)方框中输入"System Managed Accounts Group",再点击"检查名称" 转载: 百度经验: https: ...
- 3D场景建模零代码平台
3D场景建模软件(零基础.零代码.**),是指用来制作场景的软件,分为2D建模和3D建模,二者使用的技术及原理不同. 2D软件:它是用3维几何图形绘制出三维图形的软件,其主要功能是利用软件中已经画好的 ...
- Spring AOP 报错:Error creating bean with name 'student' defined in file
问题概述 Spring AOP 报错,一直显示:Error creating bean with name 'student' defined in file 的报错.从五个方向排查:第一,aspec ...
- Spring Boot如何自定义监控指标
1.创建项目 pom.xml引入相关依赖 <project xmlns="http://maven.apache.org/POM/4.0.0" xmlns:xsi=" ...