您现在的位置是：网站首页> 编程资料编程资料

vuex5中的Pinia插件机制_vue.js_

2023-05-24 359人已围观

简介 vuex5中的Pinia插件机制_vue.js_

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