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