（十三）编写插件
一、编写插件
说明
命名规范，插件的方法名保持和文件名字一样，
比如：logPlugin.js
那么他的方面就应该叫做: function logPlugin() {}
- 在
store文件下面，添加themePlugin.js文件
export default function themePlugin() {
return { theme: 'light' }
}二、使用插件
main.js
import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'
// 导出插件
import themePlugin from './store/themePlugin'
// 使用下面定义的日志插件
import logPlugin from './store/logPlugin'
create app = createApp(app)
// 把 pinia 返回的数据保存起来
const pinia = themePlugin()
// 应用插件
pinia.use(themePlugin)
pinia.use(logPlugin)
app.use(pinia)
app.mount('#app')三、在组件中使用插件
<script setup>
import { useUserStore } from '@/store/user.js'
const userStore = useUserStore()
console.log(userStorem.theme)
// 最终打印 linght
</script>四、定义一个复杂一点的日志插件，监听 store 的变化
- 在
store新建一个logPlugin.js pinia会给插件传递一个context对象作为参数，里面包含storeoptions等其他相关配置
export default function logPlugin() {
console.log(context)
// 调用 $subScribe 来监听 store 的变化
// 需要传递 mutations, state 作为参数
context.store.$subScribe((mutations, state) => {
console.log(mutations.type, mutations.stareId, mutations.events.newValue)
})
}本文参与 腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。
原始发表：2022年11月28日，如有侵权请联系 cloudcommunity@tencent.com 删除
评论
登录后参与评论
推荐阅读
目录
腾讯云开发者
