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 = "我是第二种" })