vuex5中的Pinia插件機制

更新時間：2022年07月21日 11:41:32 作者：神奇大叔

這篇文章主要介紹了vuex5中的Pinia插件機制，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教

vuex5 Pinia插件機制

通過插件擴展

.給每個store添加公共屬性
.給stores添加新的配置
.給stores添加新的方法
.包裹重用已有方法
.改變或者取消actions
.應用額外的副作用像localstorage
.應用給指定的store

1、使用

import { createPinia } from 'pinia'
const pinia = createPinia()

(1)定義插件

function SecretPiniaPlugin(context) {
context.pinia; ?pina實例`createPinia()`
context.app; ?vue實例`createApp()`
context.store; ? 正在配置的store
context.options; ?store的配置`defineStore()`

(1)設置響應式數據

每個store都是reactive包裹的對象，所以使用起來可直接解套ref

context.store.hello = ref('secret');
context.store.hello;

(2)state添加數據

const globalSecret = ref('secret')

可直接添加

store.secret = globalSecret

通過$state,可獲得devtools追蹤、ssr中進行序列化

store.$state.secret = globalSecret

添加第三方數據，不要求響應式時，需要使用markRow進行轉換

store.router = markRaw(router)

(3)添加監(jiān)聽器

? store.$subscribe(() => {
? store改變時觸發(fā)
? })
? store.$onAction(() => {
? ? ?action觸發(fā)時觸發(fā)
? })
...
}

(2)應用插件

pinia.use(SecretPiniaPlugin)

(3)devTools能追蹤修改

方式一：返回修改的操作

pinia.use(({ store }) => ({
? store.hello = 'world'
}))

方式二：顯示添加

pinia.use(({ store }) => {
? store.hello = 'world'
? if (process.env.NODE_ENV === 'development') {
? ? store._customProperties.add('hello')
? }
})

2、應用

(1)給每個store添加公共state

function SecretPiniaPlugin() {
? return { secret: 'the cake is a lie' }
}
pinia.use(SecretPiniaPlugin)

(2)改寫store中的action

.此例為改寫成防抖action

defineStore('search', {
? actions: {
? ? searchContacts() {
? ? },
? },
? debounce: {
? ? searchContacts: 300,
? },
})

對于函數寫法的store，自定義選項放入第三個參數中

defineStore(
? 'search',
? () => {
? ? ...
? },
? {
? ? // this will be read by a plugin later on
? ? debounce: {
? ? ? // debounce the action searchContacts by 300ms
? ? ? searchContacts: 300,
? ? },
? }
)

插件中：

import debounce from 'lodash/debunce'
pinia.use(({ options, store }) => {
? if (options.debounce) {
??
? ? 將設置了debounce的store中的原action改寫成具有防抖功能的action
? ??
? ? return Object.keys(options.debounce).reduce((debouncedActions, action) => {
? ? ? debouncedActions[action] = debounce(
? ? ? ? store[action],
? ? ? ? options.debounce[action]
? ? ? )
? ? ? return debouncedActions
? ? }, {})
? }
})

pinia和vuex的區(qū)別

（1）它沒有mutation,他只有state，getters，action【同步、異步】使用他來修改state數據

（2）他默認也是存入內存中，如果需要使用本地存儲，在配置上比vuex麻煩一點

（3）語法上比vuex更容易理解和使用，靈活。

（4）pinia沒有modules配置，沒一個獨立的倉庫都是definStore生成出來的

（5）state是一個對象返回一個對象和組件的data是一樣的語法

需要在頁面組件中引入我們要修改數據

安裝的本地存儲插件可以是npm也可以是year

以上為個人經驗，希望能給大家一個參考，也希望大家多多支持腳本之家。

您可能感興趣的文章:

vuex5
Pinia

vue3項目如何國際化實戰(zhàn)指南
像很多大型的網址,特別是跨國際等公司網頁,訪問來自世界各地用戶,所以網頁的國際化極其重要的需求,下面這篇文章主要給大家介紹了關于vue3項目如何國際化的相關資料,需要的朋友可以參考下
2022-09-09
element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法
走馬燈功能在展示圖片時經常用到,下面這篇文章主要給大家介紹了關于element-plus/element-ui走馬燈配置圖片及圖片自適應的最簡便方法,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下
2023-03-03
記一次vuex的mapGetters無效原因及解決
這篇文章主要介紹了vuex的mapGetters無效原因及解決方案，具有很好的參考價值，希望對大家有所幫助。如有錯誤或未考慮完全的地方，望不吝賜教
2022-08-08
Vue實現數據篩選與搜索功能的示例代碼
在許多Web應用程序中,數據篩選和搜索是關鍵的用戶體驗功能,本文將深入探討在Vue中如何進行數據篩選與搜索的實現,感興趣的小伙伴可以跟隨小編一起學習一下
2023-10-10
基于vue手動實現一個日歷組件
這篇文章主要為大家詳細介紹了如何基于vue手動實現一個日歷組件,文中的示例代碼講解詳細,具有一定的借鑒價值,有需要的小伙伴可以跟隨小編一起學習一下
2024-01-01
利用SpringMVC過濾器解決vue跨域請求的問題
下面小編就為大家分享一篇利用SpringMVC過濾器解決vue跨域請求的問題，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2018-02-02
vue+導航錨點聯動-滾動監(jiān)聽和點擊平滑滾動跳轉實例
今天小編就為大家分享一篇vue+導航錨點聯動-滾動監(jiān)聽和點擊平滑滾動跳轉實例，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2019-11-11
vue項目中在可編輯div光標位置插入內容的實現代碼
這篇文章主要介紹了vue項目中在可編輯div光標位置插入內容的實現代碼，代碼簡單易懂，非常不錯，具有一定的參考借鑒價值,需要的朋友可以參考下
2020-01-01
Vue組件間通信方法總結（父子組件、兄弟組件及祖先后代組件間）
這篇文章主要給大家介紹了關于Vue組件間通信的相關資料，其中包括父子組件、兄弟組件及祖先后代組件間的通信，文中通過示例代碼介紹的非常詳細，對大家學習或者使用Vue具有一定的參考學習價值，需要的朋友們下面來一起學習學習吧
2019-04-04
vue-cli3 熱更新配置操作
這篇文章主要介紹了vue-cli3 熱更新配置操作，具有很好的參考價值，希望對大家有所幫助。一起跟隨小編過來看看吧
2020-09-09