pinia
两种写法定义pinia
第一种：对象形式
不需要写ref state直接就是响应式数据
import { defineStore } from "pinia"
export const useCounterStore = defineStore("useCounterStore ", {
state:() =>{
return{
}
},
actions:{
},
getters:{
}
})
第二种： 匿名函数形式
需要写ref定义state 不然不是响应式 用了ref 在actions和getters中使用的时候就需要.value
import { defineStore } from "pinia"
import { ref, computed } from "vue"
export const useCounterStore = defineStore("useCounterStore ", () => {
let num = ref(1) // 自动识别为state
const dobuleNum = computed(() => { // 使用了computed 自动识别为计算属性
return num.value * 2
})
function addNum(){
//自动识别为actions pinia没有muctions了 actions就可以同步异步都可以
}
return {
num, dobuleNum,addNum
}
})
state
重置状态
将state的状态重置到初始值
let data = useCountPinia()
data.$reset() //重置
同时修改多个状态
// 第一种方法 接受一个对象
let data = useCountPinia()
data.$patch({
name:xxx,
num:xxx
})
// 第二种方法：接受一个函数
data.$patch((state)=>{
state.name = xxxx
state.num = xxx
})
替换整个state
通过 store.$state = {}来替换
let data = useCountPinia()
data.$state = {
xxx
}
订阅状态
在vue中可以使用watch来对vuex的数据进行监听 但是如果想在js中使用的话就要借助$subscribe
vuex中也有$subscribe 具体看文档吧
pinia中的$subscribe写法如下
import { useCountPinia } from "@/store/index"
const data = useCountPinia()
data.$subscribe((mutation,state)=>{ // mutation是记录state变化信息的对象 state是state对象
// 修改state之后会触发此回调函数
})
// 分析mutation和state是什么
// mutaton：
{
"type": "patch function", // 修改的类型
/**
"patch function"通过$patch传入函数修改
"patch object" 通过$patch传入对象修改
"direct" 直接修改state
*/
"storeId": "useCounterStore ", // 库的id
"events": [ // 存储变化的数据信息
{...}
]
}
// state
是一个Proxy对象 是state的代理对象
那么 watch 和 subscribe 捕获数据变化的区别是什么?
watch只会捕获新旧值不同的情况
subscribe不仅会捕获新旧值不同 只要是进行修改 就会捕获
二、Getters
箭头函数没有this所以需要使用接收参数state来实现
getters: {
// 自动将返回类型推断为数字
doubleCount(state) {
return state.counter * 2
},
// 返回类型必须明确设置
doublePlusOne(): number {
return this.counter * 2 + 1
},
doubleNum:(state) =>{
return state.num *2
}
},
传递参数给getter
没有办法直接获取 但是可以再返回一个函数 在这个函数中去接收
doubleNum:(state) =>{
return (value) =>{ // 接收的参数
return state.num + value
}
}
<h1>
{{store.doubleNum('我是传参')}}
</h1>
需要注意的是 当使用了传参之后 getter则不再缓存 只是您调用的参数
三、Actions
Actions相当于组件中的methods 可以使用actions进行定义
export const useStore = defineStore('main',() =>{
state:()=>{
return {
num:0
}
},
actions:{
add(){
this.num ++
}
}
})
actions可以是异步的 代替了vuex 中的mutations
订阅actions
xxxxxxx
四、plugins
用于补充扩展store。本质其实就是一个函数，可以有以下操作
- 向Store添加新属性
- 定义Store时添加新选项
- 为Store添加新方法
- 包装现有方法
- 更改甚至取消操作
- 实现本地存储等副作用
- 仅适用于特定Store
在mian.js文件中使用pinia.use()将插件添加到pinia实例中。下面举例为所有的store添加一个静态属性
//main文件
import { createPinia } from "pinia"
// 为安装此插件后创建的每个store添加一个名为 `level` 的属性
function SecretPiniaPlugin() {
return {
level:'1.982'
}
}
// 将插件提供给pinia
const pinia = createPinia()
pinia.use(SecretPiniaPlugin)
// 在另一个文件中
const store = useStore()
store.level // 'the cake is a lie'
添加新属性
有两种写法
// 第一种
const pinia = createPinia()
pinia.use(()=>{
return {
name:'我是第一种'
}
})
// 第二种
const pinia = createPinia()
pinia.use(({store}) =>{
store.name = "我是第二种"
})