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)添加監聽器
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 }, {}) } })
pinia和vuex的區別
(1)它沒有mutation,他隻有state,getters,action【同步、異步】使用他來修改state數據
(2)他默認也是存入內存中,如果需要使用本地存儲,在配置上比vuex麻煩一點
(3)語法上比vuex更容易理解和使用,靈活。
(4)pinia沒有modules配置,沒一個獨立的倉庫都是definStore生成出來的
(5)state是一個對象返回一個對象和組件的data是一樣的語法
需要在頁面組件中引入我們要修改數據
安裝的本地存儲插件可以是npm也可以是year
以上為個人經驗,希望能給大傢一個參考,也希望大傢多多支持WalkonNet。
推薦閱讀:
- Vue狀態管理庫Pinia詳細介紹
- 還在用vuex?來瞭解一下pinia
- JavaScript Pinia代替 Vuex的可行性分析
- vue3+pinia的快速入門使用教程
- Vue生態的新成員Pinia的詳細介紹