1.什么是Pinia？
1.pinia 和 vuex 具有相同的功效抡驼， 是 Vue 的存儲庫，它允許您跨組件/頁面共享狀態(tài)肿仑。
2.設計使用的是 Composition api致盟，更符合vue3的設計思維。
3.Pinia 對 Vue 2 和 Vue 3 都有效柏副，并且不需要您使用組合 API勾邦。
2.Pinia 的使用
2.1 Pinia 的安裝
在安裝Pinia的時候可以使用yarn 也可以使用 npm
yarn add pinia
# 或者使用 npm
npm install pinia
2.2 Pinia 的引入
一般我們在做項目的時候，都會在main.js 或者 main.ts 中引入割择。
vue3 中引入的使用
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
const app = createApp(App);
const pinia = createPinia();
app.use(pinia);
app.mount('#app')
vue2 中引入的使用
import { createPinia } from 'pinia'
const pinia = createPinia();
new Vue({
el: '#app',
// 其他選項...
// ...
// 注意同一個 `pinia` 實例可以在多個 Vue 應用程序中使用
// 同一個頁面
pinia,
})
2.3 Pinia 模塊的創(chuàng)建
我們可以在vue的項目中眷篇，在src文件夾下面創(chuàng)建一個store文件夾專門來管理我們的pinia 模塊。在文件夾下面我們可以創(chuàng)建多個js或者ts文件來對應我們的模塊荔泳。
下面就是我在store 文件夾下面創(chuàng)建的一個index.js模塊蕉饼。
// 想要使用必須先引入 defineStore；
import { defineStore } from 'pinia';
// 這里我們使用的是es6 的模塊化規(guī)范進行導出的玛歌。
// defineStore 方法有兩個參數(shù)昧港，第一個參數(shù)是模塊化名字（也就相當于身份證一樣，不能重復）
// 第二個參數(shù)是選項支子，對象里面有三個屬性创肥，相比于vuex 少了一個 mutations.
export const useStore = defineStore('main', {
state(){ // 存放的就是模塊的變量
return {
count: 10
}
},
getters:{ // 相當于vue里面的計算屬性，可以緩存數(shù)據(jù)
},
actions:{ // 可以通過actions 方法值朋，改變 state 里面的值叹侄。
}
})
2.4 Pinia 數(shù)據(jù)頁面的使用
我們以vue3 頁面為例，簡單介紹一下昨登，Pinia頁面的使用趾代。
<template>
<div>
<p>{{store.count}}</p>
</div>
</template>
<script>
// 這里引入我們導出的 useStore；
import { useStore } from '../store/index.js'
export default {
setup(props) {
// 值得注意的是 useStore 是一個方法丰辣，調用之后會給我們返回一個對象撒强。
// 這個時候禽捆，你就會發(fā)現(xiàn)，頁面上就能正常顯示我們在index.js 里面的 state 里面定義的 count 數(shù)據(jù)飘哨。
const store = useStore();
return {
store
}
}
}
</script>
當然如果你vuex輔助函數(shù)用的非常熟練的話胚想，你就會產(chǎn)生疑問，在上面代碼 p 標簽中杖玲，我不寫store.count顿仇。直接寫成 count 行不行呢淘正？
<template>
<div>
<p>{{count}}</p>
</div>
</template>
<script>
import { useStore } from '../store/index.js'
import { storeToRefs } from 'pinia';
export default {
setup(props) {
const store = useStore();
return {
...storeToRefs(store)
}
}
}
</script>
顯然在頁面中我們依然能看到 count 數(shù)據(jù)被展示在頁面上摆马，我們是使用 pinia 給我們提供的 storeToRefs 來展開的。細心的小伙伴鸿吆，會發(fā)現(xiàn)他其實和 我們在 vue3 中使用的 toRefs 非常的像囤采。
3.pinia 中 修改 state 數(shù)據(jù)的方法。
3.1 直接修改 store 對象的數(shù)據(jù)
// html 代碼
<p>{{count}}</p>
<button @click="add">累計</button>
// js 代碼
const store = useStore();
const add = () => {
store.count ++
}
通過上面的代碼惩淳，我們會發(fā)現(xiàn)蕉毯，當我點擊button 按鈕累加的時候，頁面中 count 數(shù)據(jù)就跟著發(fā)生了變化思犁。
3.1 $patch 方法傳遞一個對象來修改代虾。
廢話不多說，我們還是直接上代碼激蹲。
// html 代碼
<p>{{count}}</p>
<button @click="add">累計</button>
// js 代碼
const store = useStore();
const add = () => {
store.$patch({
count: store.count + 1
})
}
通過以上代碼我們也能實現(xiàn)數(shù)據(jù)的修改棉磨，但是有的小伙伴可能就有疑問了？為什么感覺比第一個還復雜了呢学辱？
官方給我們的解釋是 patch 可以同時修改 多個數(shù)據(jù)。
// html 代碼
<p>我是count數(shù)據(jù){{count}}</p>
<p>num{{num}}</p>
<button @click="add">累計</button>
// js 代碼
const store = useStore();
const add = () => {
store.$patch({
count: store.count + 1,
num: store.num + 1
})
}
通過上面的代碼策泣，你會發(fā)現(xiàn)衙傀，點擊按鈕，兩個數(shù)據(jù)都會發(fā)生變化萨咕。
3.3 $patch 方法傳遞一個函數(shù)來修改统抬。
上面我們說了使用 $patch 傳遞一個對象來修改數(shù)據(jù)，那如果傳遞的是一個函數(shù)危队，該怎么修改呢聪建？
// html 代碼
<p>我是count數(shù)據(jù){{count}}</p>
<p>num{{num}}</p>
<button @click="add">累計</button>
// js 代碼
const store = useStore();
const add = () => {
store.$patch(state => {
state.count++;
state.num++;
})
}
// 特別注意：如果是傳遞函數(shù)的話 state 就是 我們在 pinia 模塊里面定義的 存儲 數(shù)據(jù)的對象，不在是頁面中使用的 store 對象了交掏。
3.4 actions 里面修改數(shù)據(jù)
當然如果我們的數(shù)據(jù)妆偏，需要一個復雜的處理過程的話，我們最好把他盅弛，放到我們的 actions 里面去修改钱骂，這樣的話叔锐，方便我們后期的維護。
// 首先我們需要在 actions 里面定義一個方法
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
state(){
return {
count: 10,
num: 20
}
},
getters:{
},
actions:{
piniaAdd(){
this.count++;
// 特別注意：在這里this指向的就是當前的實例化出來的對象见秽，piniaAdd 該函數(shù)如果換成箭頭函數(shù)的話愉烙，this 指向就會發(fā)生 改變，不能再使用 this.count++; 了
}
}
})
// 頁面
// html 代碼
<p>我是count數(shù)據(jù){{count}}</p>
<p>num{{num}}</p>
<button @click="add">累計</button>
// js代碼
const store = useStore();
const add = () => {
store.piniaAdd();
}
4.pinia 固化插件的使用
npm i pinia-plugin-persist --save --include=dev
// 或者使用 yarn 安裝
yarn add pinia-plugin-persist
安裝完成之后解取，我們可以在main.js 或者 main.ts 中引入步责。具體代碼如下：
import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';
// 下面是我們安裝的固化插件。
import piniaPersist from 'pinia-plugin-persist'
const app = createApp(App);
const pinia = createPinia();
pinia.use(piniaPersist);
// 特別注意：固化插件是 pinia.use 并不是 app.use
app.use(pinia);
app.mount('#app')
具體模塊中的使用看下面的代碼：
import { defineStore } from 'pinia';
export const useStore = defineStore('main', {
state(){
return {
count: 10,
num: 20
}
},
persist: { // 固化插件
enabled: true, // 開啟存儲
strategies: [ // 指定存儲的位置以及存儲的變量都有哪些禀苦，該屬性可以不寫蔓肯，
//在不寫的情況下，默認存儲到 sessionStorage 里面,默認存儲 state 里面的所有數(shù)據(jù)振乏。
{ storage: localStorage, paths: ["count"] },
// paths 是一個數(shù)組蔗包，如果寫了 就會只存儲 count 變量，當然也可以寫多個慧邮。
]
},
getters:{
},
actions:{
piniaAdd(){
this.count++;
}
}
})
ok 打完收工调限，歡迎指正。
