個人簡介
??個人主頁： 前端雜貨鋪
???♂?學(xué)習(xí)方向： 主攻前端方向，正逐漸往全干發(fā)展
??個人狀態(tài)： 研發(fā)工程師，現(xiàn)效力于中國工業(yè)軟件事業(yè)
??人生格言： 積跬步至千里，積小流成江海
??推薦學(xué)習(xí)：??前端面試寶典 ??Vue2 ??Vue3 ??Vue2/3項(xiàng)目實(shí)戰(zhàn) ??Node.js??Three.js ??JS版算法
??個人推廣：每篇文章最下方都有加入方式，旨在交流學(xué)習(xí)&資源分享，快加入進(jìn)來吧
前言（簡介）
各位新朋友、老朋友們大家好，這里是前端雜貨鋪，歡迎各位的到來！！
Vue3 其實(shí)在 2020 年 09 月18 日 就已經(jīng)正式發(fā)布了，這樣看來都快 三年 的時間了。屏幕前的各位可能曾有意無意間看到過 Pinia 這個詞，那么 Pinia 到底是個什么東西呢？
答：其實(shí) Pinia 就是一個擁有 組合式 API 的 Vue 狀態(tài)管理庫
- 組合式 API：Vue3 => 組合式 API（Composition API），Vue2 => 選項(xiàng)式 API（Options API）
- Vue 狀態(tài)管理庫：允許我們跨組件或頁面共享狀態(tài)
所以我們就可以把 Pinia 看成是 Vuex 的升級或改良版本，Vuex 更適合 Vue2，而 Pinia 更適合 Vue3
與 Vuex 相比，Pinia 不僅 提供了一個更簡單的 API，也提供了 符合組合式 API 風(fēng)格的 API，最重要的是，搭配 TypeScript 一起使用時 有非?？煽康念愋屯茢嘀С?/strong>。Pinia 還 棄用了 mutation，因?yàn)樵?Vuex 中 mutation 經(jīng)常被認(rèn)為是個冗余的存在
哦~，原來這是 Pinia 啊，那為什么不延續(xù)之前的叫法 Vuex 呢？
答：有人說是為了尊重原作者，就以作者的名字作為狀態(tài)管理庫的叫法了。但我看 Pinia 官方文檔，
是說 Pinia（西班牙語中表示 “菠蘿”）， 菠蘿花實(shí)際上是一組各自獨(dú)立的花朵，它們結(jié)合在一起，由此形成一個多重的水果。 與 Store 類似，每一個都是獨(dú)立誕生的，但最終它們都是相互聯(lián)系的
咳咳咳，大家對這個詞的由來有個了解就好，這個不是那么重要…
好了各位，我的廢話說的差不多了（O(∩_∩)O），接下來我們言歸正傳，開始真正的 Pinia 學(xué)習(xí)之旅吧~
創(chuàng)建 Vite + Vue + TS 項(xiàng)目
為什么要創(chuàng)建項(xiàng)目呢，因?yàn)槲覀兊?Pinia 打算在單文件組件中使用，所以創(chuàng)建項(xiàng)目是個必要的步驟
在合適的位置 win + r 打開命令框
## 搭建 Vue 項(xiàng)目
npm create vite learn-pinia --template vue-ts
之后可以通過 VS Code 或其他編譯器打開項(xiàng)目，在終端進(jìn)行如下操作：
## 安裝依賴
npm install
## 運(yùn)行項(xiàng)目
npm run dev
在瀏覽器中打開終端的鏈接，如下圖所示，就是啟動成功了（喝彩一下~）：
安裝 Pinia
其實(shí)以上的操作只是創(chuàng)建了一個基于 Vite + Vue3 + TS 的項(xiàng)目，我們 還需要安裝 Pinia
其實(shí)很簡單，只需要終端鍵入以下命令，再回車即可：
npm intsall pinia
搭建 Pinia 模塊
在 src 目錄下新建 store 文件，在 store 文件中創(chuàng)建 index.ts 文件
import { createPinia } from 'pinia'
const pinia = createPinia()
export default pinia
在 main.ts 文件中進(jìn)行掛載 pinia
import pinia from './store'
createApp(App).use(pinia).mount('#app')
至此，我們的架子就搭建完成了…
本篇小結(jié)
通過本篇文章，我們初步認(rèn)識了 Pinia，它是一個擁有 組合式 API 的 Vue 狀態(tài)管理庫，之后我們進(jìn)行了對 Vite + Vue3 + TS 項(xiàng)目的創(chuàng)建，還進(jìn)行了 Pinia 的安裝 以及 Pinia 模塊的搭建。 接下來，我們再深入認(rèn)識和學(xué)習(xí) Pinia，并利用它做一些 Demo 和 項(xiàng)目…
參考資料：文章來源：http://www.zghlxwxcb.cn/news/detail-569870.html
- Pinia 官方文檔
- Pinia 教程 【作者：千鋒教育】
文章來源地址http://www.zghlxwxcb.cn/news/detail-569870.html
到了這里，關(guān)于Vue3正式發(fā)布那么久了，你認(rèn)識Pinia了嗎？的文章就介紹完了。如果您還想了解更多內(nèi)容，請?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
