今天小編給大家分享一下Vue3中如何引入Pinia存儲庫并使用的相關知識點，內容詳細，邏輯清晰，相信大部分人都還太了解這方面的知識，所以分享這篇文章給大家參考一下，希望大家閱讀完這篇文章后有所收獲，下面我們一起來了解一下吧。

創(chuàng)新互聯專注為客戶提供全方位的互聯網綜合服務，包含不限于做網站、網站制作、臨河網絡推廣、重慶小程序開發(fā)、臨河網絡營銷、臨河企業(yè)策劃、臨河品牌公關、搜索引擎seo、人物專訪、企業(yè)宣傳片、企業(yè)代運營等，從售前售中售后，我們都將竭誠為您服務，您的肯定，是我們最大的嘉獎；創(chuàng)新互聯為所有大學生創(chuàng)業(yè)者提供臨河建站搭建服務，24小時服務熱線：18980820575，官方網址：www.cdcxhl.com

1.用自己最喜歡的方式安裝

yarn add pinia
# 或者使用 npm
npm install pinia

2.main.js引入

import { createApp } from 'vue'
import App from './App.vue'
 
const app=createApp(App)
import { createPinia } from 'pinia' //引入pinia
app.use(createPinia())
 
app.mount('#app')

3.創(chuàng)建store文件并配置內部的index.js文件

import { defineStore } from 'pinia' //引入pinia
 
//這里官網是單獨導出  是可以寫成默認導出的  官方的解釋為大家一起約定倉庫用use打頭的單詞 固定統一小倉庫的名字不易混亂
export const useCar=defineStore("test",{ 
    state: () =>{
        return  ({
            msg:"這是pinia",
            name:"小小",
            age:18
            }) //為了避免出錯，返回的值用()包起來
    } 
})

4.組件使用方法

5.重置store.$reset()

6.群體修改store.$patch,可以將pinia的數據進行同一修改

特點：批量修改但狀態(tài)只刷新一次

7.訂閱修改

//可以通過 store 的 $subscribe() 方法查看狀態(tài)及其變化,通過patch修改狀態(tài)時就會觸發(fā)一次
store.$subscribe((mutation, state) => { 
  // 每當它發(fā)生變化時，將整個狀態(tài)持久化到本地存儲
  localStorage.setItem('hello', JSON.stringify(state))
})

8.Getter

Getter 完全等同于 Store 狀態(tài)的 計算值。 它們可以用 defineStore() 中的 getters 屬性定義。 他們接收“狀態(tài)”作為第一個參數以鼓勵箭頭函數的使用：(ps:雖然鼓勵但是依然提供了非es6玩家的使用方式 內部可以用this代表state)

//store/index.js文件
export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  getters: {
    doubleCount: (state) => state.counter * 2,
  },
})
 
//組件中直接使用:  
Double count is {{ store.doubleCount }}

9.Actions

在pinia中沒有提供mutaion 因為Actions就夠了(它可以異步同步的統一修改狀態(tài))之所以提供這個功能 就是為了項目中的公共修改狀態(tài)的業(yè)務統一

export const useStore = defineStore('main', {
  state: () => ({
    counter: 0,
  }),
  actions: {
    increment() {
      this.counter++//1.有this
    },
    randomizeCounter(state) {//2.有參數   想用哪個用哪個
      state.counter = Math.round(100 * Math.random())
    },
    randomizeCounter(state) {
        //異步函數.接口成功賦值
     ajax.hplBaseApi("app/productSelection/categoryRows", {}, "post").then((res) => {
        state.counter = res.data.length
     });
    }
  },
})
 
//組件中的使用:
  setup() {
    const store = useStore()
    store.increment()
    store.randomizeCounter()
  }

以上就是“Vue3中如何引入Pinia存儲庫并使用”這篇文章的所有內容，感謝各位的閱讀！相信大家閱讀完這篇文章都有很大的收獲，小編每天都會為大家更新不同的知識，如果還想學習更多的知識，請關注創(chuàng)新互聯行業(yè)資訊頻道。