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编辑器.就其功能而言,主要功能已经实现,一些小的不影响使用的功能由于时间关系还没有完成:但就代码而言,之 ...
随机推荐
- JAVA 进阶第一阶段 59-69
10/10号笔记 私有与公共 用private在类中定义的成员变量 只有在这个类的内部才支持访问和编写 public 公共的 用这个定义的在任何地方都可以访问 比如public calss clock ...
- Cesium viewer.extend 五个拓展(五)
2023-01-09 1.viewerDragDropMixin 一个mixin,它为查看器小部件添加了对CZML文件的默认拖放支持. czml即为json,但json不一定为czml:如同geojs ...
- LG P6156 简单题
\(\text{Problem}\) \(\text{Analysis}\) 显然 \(f=\mu^2\) 那么 \[\begin{aligned} \sum_{i=1}^n \sum_{j=1}^n ...
- JZOJ 4366. 【GDKOI2016】项链
\(\text{Problem}\) 给出一个项链,删去连续的一部分,使剩下的对称,且长度最长 \(\text{Analysis}\) 可以发现,剩下的合法项链一定是由两个回文串接起来(由对称性质可知 ...
- ve-plus:基于 vue3.x 桌面端UI组件库|vue3组件库
VE-Plus 自研轻量级 vue3.js 桌面pc端UI组件库 经过一个多月的筹划及开发,今天给大家带来一款全新的Vue3桌面端UI组件库VEPlus.新增了35+常用的组件,采用vue3 setu ...
- IIS 负载均衡(ARR)
Application Request Route:应用程序请求路由 1.下载安装web平台安装程序 微软官网搜索 "web平台安装程序" 只能找到 "web平台安装程序 ...
- PHP实现QQ第三方登录代码
前言: PHP实现QQ快速登录,罗列了三种方法 方法一:面向过程,回调地址和首次触发登录写到了一个方法页面[因为有了if做判断], 方法二,三:面向对象 1.先调用登录方法,向腾讯发送请求,2.腾讯携 ...
- ISE_14.7_Windows10安装
直接下载安装会报如下错误: There was an unexpected error executing Import ISE Virtual Appliance 解决方案 1.阅读xilinx手册 ...
- Android Studio连接SQLlite
1. MainActivity.java package com.example.dbproject;import android.database.sqlite.SQLiteDatabase;imp ...
- ERROR StatusLogger No Log4j 2 configuration file found
ERROR StatusLogger No Log4j 2 configuration file found. Using default configuration (logging only er ...