解釋一下pinia：

Pinia是一個(gè)基于Vue3的狀態(tài)管理庫(kù)，它提供了類似Vuex的功能，但是更加輕量化和簡(jiǎn)單易用。Pinia的核心思想是將所有狀態(tài)存儲(chǔ)在單個(gè)store中，并且將store的行為和數(shù)據(jù)暴露為可響應(yīng)的API，從而實(shí)現(xiàn)數(shù)據(jù)（或方法）在各個(gè)組件之間的共享和修改；

1、新建一個(gè)vue3項(xiàng)目，并導(dǎo)入pinia的依賴：

npm install pinia

2、在main.ts中引入pinia：

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'

const app = createApp(App)

const pinia = createPinia()
app.use(pinia)
app.use(router)

app.mount('#app')

3、在src目錄下，新建一個(gè)stores文件夾。我們?cè)谶@個(gè)文件夾中進(jìn)行pinia的使用；

新建一個(gè)counter.ts文件，在這個(gè)文件中定義一個(gè)變量count，使這個(gè)count變量能被所有的組件共享，并修改其值；

countrt.ts的代碼如下：

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
// 定義一個(gè)方法，直接清空count
const clearCount = () => {
count.value=0
}

  return { count,clearCount}
})

解釋一下：

defineStore ：是pinia使用中必須要引入的一個(gè)函數(shù)，它是用于定義一個(gè)新的store的函數(shù)。

在Pinia中，每個(gè)store都需要使用defineStore函數(shù)進(jìn)行定義，并傳入一個(gè)配置對(duì)象來描述store的行為和數(shù)據(jù)。

defineStore 一般要傳遞兩個(gè)參數(shù)，第一個(gè)是store函數(shù)的名稱，一般這個(gè)名稱要做到見名知義、第二個(gè)是這個(gè)store函數(shù)的具體邏輯。

可以在這里面定義屬性、方法等。但是這些定義過的屬性和方法一定要通過return交出去才行

如上圖，我們頂義一個(gè)count變量，并通過return返回了出去。那么現(xiàn)在就可以在任意組件中查看count的值，并進(jìn)行修改了。

4、使用pinia：

要在組件中使用pinia定義的store函數(shù)，第一步是要先引入store：

import { useCounterStore } from '@/stores/counter';

第二步，定義一個(gè)參數(shù)來接收這個(gè)useCounterStore函數(shù)：

const counterStore = useCounterStore();

第三步，直接在需要的位置引入counterStore中的參數(shù)即可

(可以是屬性，也可以是方法。但是有一點(diǎn)要注意，就是必須要是return交出去的才可以；)

從pinia中取到的數(shù)據(jù){{ counterStore.count }}

 <button @click="counterStore.clearCount">清空count</button>

屬性或者方法都可以直接使用，只要你在return中交出去了

啟動(dòng)vue3項(xiàng)目，查看

可以看到確實(shí)能獲取到pinia中定義的數(shù)據(jù)count；

如果想要修改count，可以直接在數(shù)值上修改：

const addCount = () => {

counterStore.count++;

}

定義一個(gè)按鈕，并綁定事件：修改結(jié)果如圖：

這個(gè)修改是全局的，你在另一個(gè)組件中也可以觀察到pinia中數(shù)據(jù)的變化：

但是pinia有一個(gè)不好的地方就是它默認(rèn)是內(nèi)存存儲(chǔ)，你只要一刷新瀏覽器就會(huì)丟失數(shù)據(jù)。

我們這時(shí)候可以借助pinia的持久化插件persist來解決；

1、下載persist持久化插件：

npm install pinia-plugin-persistedstate

2、在pinia中使用persist

import './assets/main.css'

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
import router from './router'
// 1、pinia的持久化插件
import { createPersistedState } from 'pinia-plugin-persistedstate'

const app = createApp(App)

//2、 接收createPersistedState函數(shù)
const piniaPersistedState = createPersistedState()

const pinia = createPinia()
// 3、在pinia中引入持久化插件
pinia.use(piniaPersistedState)

app.use(pinia)
app.use(router)

app.mount('#app')

3、在定義狀態(tài)store的時(shí)候指定持久化配置參數(shù)：{persist：true}

import { ref } from 'vue'
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
// 定義一個(gè)方法，直接清空count
const clearCount = () => {
count.value=0
}

  return { count,clearCount}
},
{persist: true}

)

引入了pinia的持久化插件之后，我們?cè)偎⑿马撁妫敲磒iniade的store函數(shù)中的數(shù)據(jù)也就持久的保存了。

其實(shí)這個(gè)插件底層也是使用了localstorage，將數(shù)據(jù)存儲(chǔ)到了瀏覽器中。

到此這篇關(guān)于vue3中pinia的使用及持久化的實(shí)現(xiàn)的文章就介紹到這了,更多相關(guān)vue3 pinia使用及持久化內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論