取消了getter和action等冗杂的方法;
ts原生编写,速度更快;
只有一个store,并且添加内容自动部署,提升效率;
安装:npm install pinia -S
在main.ts中引入pinia并注册(标准三步走,不做赘述)
import { createPinia } from "pinia";
const store = createPinia()
const app = createApp(App)
app.use(store)
在src文件夹下新建store文件夹,里面又新建index.ts和store-name.ts,以下为源码解释
因为后续可能因需要使用多个store,故新增store-name.ts文件来管理这些store的名称!
// index.ts文件内容
import { defineStore } from "pinia";
import { Names } from "./store-name";
export const testStore = defineStore(Names.TEST,{
state:()=>{
return{
current:1,
name:'hello'
}
},
// 类似computed,用于修饰一些值
actions:{
},
// 类似methods,可同步异步调用方法
getters:{
}
})
// store-name文件内容
export const enum Names{
TEST = 'TEST'
}
之后使用某个组件把store导入(导入时不用写完整路径,如下方代码所示);
再实例化这个仓库,就可以调用store中state内定义的属性了!!!(使用插值语法配合点运算符)
<template>
<div>
pinia中提取的值:{{ data.current }}--{{ data.name }}
div>
template>
<script setup lang='ts'>
import { testStore } from './store';
const data = testStore()
script>
在组件内部可以直接使用store实例来对state中定义的属性值进行修改;
<script setup lang='ts'>
import { testStore } from './store';
const data = testStore()
const changeVal = ()=>{
data.$patch((state)=>{
state.current=100,
state.name='goodbye world!!!'
})
}
</script>
或者直接对state下手,免去了$patch代理的过程;
但注意!使用此方式就必须要对state中的所有属性重新定义一次,否则会报错!
此方法为对象的书写方式,写对属性的赋值用冒号而不是等号,细心细心在细心,别一昧追求speed
const changeAgain = ()=>{
data.$state = {
current:1000,
name:'none'
}
}
TIPS:还有最后一种办法,直接在actions内定义一个修改state中属性的方法,然后于组件内部调用该方法即可
对store使用解构赋值的办法直接获得state中的所有属性;
因为默认解构获得的属性不具有响应式,故需要使用storeToRefs方法来让这些属性具有响应式;
一旦具有响应式就可以通过xxx.value修改他们的值了!!!
<script setup lang='ts'>
import { storeToRefs } from 'pinia';
import { testStore } from './store';
const data = testStore()
const { current, name } = storeToRefs(data) // 解构赋值
const changeCurrent = () => {
current.value = 100
}
script>
上文讲过,本对象类似于计算属性computed,故对象内部属性都是一个方法且使用return返回值;
组件调用时直接使用插值语法即可(假设组件内store实例名称为Store): {{Store.getCurrent}}
export const testStore = defineStore(Names.TEST,{
state:()=>{
return{
current:1,
name:'hello'
}
},
getters:{
getCurrent():string{
return `the current is ${this.current}`
}
}
})
本方法类似于methods,可以支持同步和异步请求,同步不多说,下面代码展示异步的写法;
async定义异步变量或者方法来进行请求操作
type User = {
name: string,
age: number
}
const login = (): Promise<User> => {
return new Promise((reslove) => {
setTimeout(() => {
reslove({
name: 'helloworld',
age: 12
})
}, 2000);
})
}
export const testStore = defineStore(Names.TEST, {
state: () => {
return {
user: <User>{}
}
},
actions: {
async setUser() {
const result = await login()
this.user = result
}
}
})
$reset
重置state内所有属性(即恢复到store中设置的最初值)
const data = testStore() // store实例
const reset = ()=>{
data.$reset()
}
$subscribe
返回一个函数,函数默认有两个形参;
检测store对象中任何一个属性的变动,变动转化成对象存储在形参args里,state顾名思义就是存储变化后的state
data.$subscribe((args,state)=>{
console.log(args);
console.log(state);
})
为了解决页面刷新后数据丢失的情况,pinia可以使用新增插件的方式存储缓存解决问题