解釋一下pinia：

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

1、新建一個vue3項目，并導入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目錄下，新建一個stores文件夾。我們在這個文件夾中進行pinia的使用；

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

countrt.ts的代碼如下：

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

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

  return { count,clearCount}
})

解釋一下：

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

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

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

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

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

4、使用pinia：

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

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

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

const counterStore = useCounterStore();

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

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

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

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

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

啟動vue3項目，查看

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

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

const addCount = () => {

counterStore.count++;

}

定義一個按鈕，并綁定事件：修改結果如圖：

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

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

我們這時候可以借助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ù)：{persist：true}

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

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

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

)

引入了pinia的持久化插件之后，我們再刷新頁面，那么piniade的store函數(shù)中的數(shù)據(jù)也就持久的保存了。

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

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

最新評論