比如我们希望每个触发mutation的时候,控制台就打印"mutation"。
// 插件其实就是一个方法, 第个参数为实例化后的store
function myPlugins(store) {
store.subscribe(mutation => {
console.log('mutation')
})
}
export default new Vuex.Store({
state,
getters,
actions,
mutations,
plugins: [myPlugins] // 可以有多个插件
})
在vuex源码里也很简单,将传入的plugins循环,然后每个函数运行一下,并且传入this,即实例化后的store
const {
plugins = [], //plugins 默认为数组,下面.forEach就不会报错
strict = false
} = options
// apply plugins
plugins.forEach(plugin => plugin(this))
所以vuex插件的本质就是new Store实例化的时候,执行这些插件函数,并且传入实例化后的store供方法内部使用