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

热门相关：现代隐士高手   山神   扑倒老公大人   孽徒快坑师   一等狂后：绝色驭兽师