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     } }
     {{store.doubleNum('我是传参')}}

需要注意的是 当使用了传参之后 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'    }}// 将插件提供给piniaconst 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 = "我是第二种"})