vuex5中的Pinia外掛機制

2022-07-21 14:00:38

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)新增監聽器

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

(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
    }, {})
  }
})