系列文章目錄

主要為了記錄如何使用Pinia在Vue3中的使用方式（下面會(huì)介紹為什么使用Vue3選型）

---

---

不用Vue2使用Pinia舉例子？

1.筆者的個(gè)人看法：

1. 目前我所在的公司中，幾乎新創(chuàng)建的項(xiàng)目全都是Vue3的項(xiàng)目，基本不存在. 新創(chuàng)建的項(xiàng)目是Vue2的項(xiàng)目

2. 個(gè)人覺得現(xiàn)在的招聘市場(chǎng)也更加的傾向于Vue3+Ts方向的開發(fā)者。

3. 雖然現(xiàn)在的市場(chǎng)上也會(huì)需要Vue2的開發(fā)者，但是我認(rèn)為更多的是需要對(duì)老的Vue2項(xiàng)目的一個(gè)維護(hù)的需要。

2.總結(jié)

個(gè)人感覺，大家還是盡最大能力的去擁抱Vue3+Ts的開發(fā)模式吧！！！

---

一、Pinia是什么

1.狀態(tài)管理工具（類比Vuex）

1.不論你是使用Vue2還是Vue3的開發(fā)者，你肯定接觸過(guò)Vuex這個(gè)Vue最初的狀態(tài)管理工具。Pinia的功能就是與Vuex類似的一個(gè)狀態(tài)管理工具。

2.Pinia的特點(diǎn)（部分會(huì)在下面的案例中展示）

一、基于 Vue 3 的響應(yīng)式系統(tǒng)，支持 Vue 3 的組合式Api（Composition API） 。
二、面向?qū)ο蟮脑O(shè)計(jì)，將狀態(tài)拆分為模塊（module）和 store 的概念。
三、簡(jiǎn)化的 API，可以通過(guò)一些簡(jiǎn)單的函數(shù)和裝飾器來(lái)定義和使用狀態(tài)。

二、Pinia如何使用（賊簡(jiǎn)單🌹）

1.引入庫(kù)（控制臺(tái)執(zhí)行如下命令）

npm install pinia //這一步大家都會(huì)安裝（不會(huì)安裝該考慮轉(zhuǎn)行了 - -！）

2.注冊(cè)Pinia

代碼如下

//常規(guī)導(dǎo)入
import {createPinia} from 'pinia'
//創(chuàng)建pinia的實(shí)例 
const pinia =createPinia()
//注冊(cè)pinia
app.use(pinia)

解釋說(shuō)明（如下圖）

3.聲明對(duì)應(yīng)的倉(cāng)庫(kù)數(shù)據(jù)（提供選項(xiàng)式Api和組合式Api兩種風(fēng)格）

一、創(chuàng)建倉(cāng)庫(kù)（選項(xiàng)式Api模式）

代碼如下所示

//第一步：導(dǎo)入 defineStore
import {defineStore} from 'pinia'//第二步：聲明對(duì)應(yīng)的倉(cāng)庫(kù): 參數(shù)一：倉(cāng)庫(kù)名稱，參數(shù)二：對(duì)應(yīng)倉(cāng)庫(kù)的配置信息
export const storeTestState =defineStore('testState',{//1.倉(cāng)庫(kù)中聲明的狀態(tài)state:()=>({count:0,name:'xiaobai',email:'1553939875@163.com'}),//2.倉(cāng)庫(kù)中的計(jì)算屬性（與Vuex中的getters一樣的作用，可以理解成是計(jì)算屬性）getters:{gettersCount:(state)=>' getters計(jì)算屬性：'+ state.count},//3.對(duì)應(yīng)的一個(gè)Action方法（與Vuex中的 mutation和Action的組合體很像）actions:{subCount(){this.count--},addCount(){this.count++},}
})

如下圖說(shuō)明

二、創(chuàng)建倉(cāng)庫(kù)（選項(xiàng)式Api模式，個(gè)人非常喜歡🌹）

代碼如下所示

export const storeFunctionTest=defineStore('function',()=>{//1.聲明ref的變量｜也可以使用reactive進(jìn)行聲明const count =ref(1)//2.計(jì)算屬性可以使用 computed來(lái)聲明（這里就不展示了）//3.下面的function對(duì)應(yīng)的就是Action中的方法const addCount = ()=>{count.value+=1}const subCount = ()=>{count.value-=1}//4.最后記得把 可調(diào)用的【狀態(tài)和方法】導(dǎo)出return{count,addCount,subCount}
})

---

4.如何使用上面創(chuàng)建的倉(cāng)庫(kù)

代碼如下所示（Vue的template和Script）

<template><div class="home-root">首頁(yè)首首頁(yè)shouye<div class="home-show"><p>{{ count.count }}-----{{ count.email }}</p><button@click="() => {count.addCount();}">+1</button><button@click="() => {count.subCount();}">-1</button></div></div>
</template>

<script setup>
//1.將剛才創(chuàng)建的倉(cāng)庫(kù)導(dǎo)入（可以導(dǎo)入多個(gè)）
import { storeTestState } from "../../store/Test/index.js";
//2.創(chuàng)建倉(cāng)庫(kù)實(shí)力（可以創(chuàng)建多個(gè)）
const count = storeTestState();
</script>

修改效果圖如下

修改前

修改后

總結(jié)

上面就是關(guān)于Pinia的基本用法。后續(xù)會(huì)繼續(xù)更新其他的用法。例如：1.倉(cāng)庫(kù)數(shù)據(jù)添加響應(yīng)式。2.倉(cāng)庫(kù)數(shù)據(jù)持久化存儲(chǔ)。

希望可以幫助到你們?nèi)チ私膺@個(gè)比較新的倉(cāng)庫(kù)狀態(tài)管理工具！！！！！💪💪💪