vuex5中的Pinia插件怎么使用

這篇文章主要介紹“vuex5中的Pinia插件怎么使用”的相關(guān)知識，小編通過實際案例向大家展示操作過程，操作方法簡單快捷，實用性強，希望這篇“vuex5中的Pinia插件怎么使用”文章能幫助大家解決問題。

vuex5 Pinia插件機制

通過插件擴展

• .給每個store添加公共屬性

• .給stores添加新的配置

• .給stores添加新的方法

• .包裹重用已有方法

• .改變或者取消actions

• .應(yīng)用額外的副作用像localstorage

• .應(yīng)用給指定的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)設(shè)置響應(yīng)式數(shù)據(jù)

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

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

• (2)state添加數(shù)據(jù)

const globalSecret = ref('secret')

可直接添加

store.secret = globalSecret

通過$state,可獲得devtools追蹤、ssr中進(jìn)行序列化

store.$state.secret = globalSecret

添加第三方數(shù)據(jù)，不要求響應(yīng)式時，需要使用markRow進(jìn)行轉(zhuǎn)換

store.router = markRaw(router)

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

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

(2)應(yīng)用插件

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、應(yīng)用

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

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

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) {
  
    將設(shè)置了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數(shù)據(jù)

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

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

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

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

 需要在頁面組件中引入我們要修改數(shù)據(jù)

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

關(guān)于“vuex5中的Pinia插件怎么使用”的內(nèi)容就介紹到這里了，感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識，可以關(guān)注億速云行業(yè)資訊頻道，小編每天都會為大家更新不同的知識點。