当前位置：首页 > news >正文

如何实现 Vuex 中的 Store 插件

news 2025/9/10 7:54:45

一、Vuex 插件的原理

二、如何注册插件

三、实现一个日志插件

四、实现一个状态持久化插件

五、订阅 Actions

六、总结

在使用 Vuex 进行状态管理时，除了 state、mutations、actions、getters 这些核心功能外，Vuex 还提供了 插件机制，让我们能够扩展 Store 的能力。通过插件，我们可以在 Store 的每次 mutation 之后进行一些副作用操作，比如：

将状态持久化到 localStorage/sessionStorage；
记录调试日志；
做接口请求的统一处理；
或者实现一些自定义的全局功能。

本文将带你理解 Vuex 插件的原理，并手把手实现一个简单的插件。

一、Vuex 插件的原理

Vuex 的插件本质上就是一个函数，它接收 store 实例 作为唯一参数，然后在函数内部对 Store 做一些扩展或监听。

官方定义：

const myPlugin = (store) => {// 插件逻辑写在这里
}

这个函数会在 store 初始化时被调用，我们可以在里面：

使用 store.subscribe 订阅每次的 mutation；
使用 store.subscribeAction 订阅每次的 action；
在 store 上挂载一些自定义的方法。

二、如何注册插件

在创建 Store 时，我们可以通过 plugins 选项来注册一个或多个插件：

import Vue from 'vue'
import Vuex from 'vuex'Vue.use(Vuex)const myPlugin = (store) => {console.log('插件已初始化！')
}export default new Vuex.Store({state: { count: 0 },mutations: {increment(state) {state.count++}},plugins: [myPlugin] // 注册插件
})

这样 myPlugin 就会在 Store 初始化时自动执行。

三、实现一个日志插件

我们先来实现一个最常见的插件 —— 日志打印插件，记录每次 mutation 的触发情况：

const loggerPlugin = (store) => {store.subscribe((mutation, state) => {console.log('mutation 类型:', mutation.type)console.log('mutation 载荷:', mutation.payload)console.log('变化后的 state:', state)})
}

当我们调用：

store.commit('increment')

控制台会输出：

mutation 类型: increment
mutation 载荷: undefined
变化后的 state: { count: 1 }

四、实现一个状态持久化插件

实际开发中，我们经常希望 刷新页面后 Vuex 状态依然存在，这时可以用插件把 state 存到 localStorage：

const persistPlugin = (store) => {// 初始化时，从本地缓存恢复状态const savedState = JSON.parse(localStorage.getItem('vuexState'))if (savedState) {store.replaceState(savedState)}// 每次 mutation 后，保存新的 statestore.subscribe((mutation, state) => {localStorage.setItem('vuexState', JSON.stringify(state))})
}

注册后，Vuex 的状态就能持久化到本地。

五、订阅 Actions

除了订阅 mutation，我们也可以订阅 action 的执行情况：

const actionLogger = (store) => {store.subscribeAction({before: (action, state) => {console.log('即将触发 action:', action.type)},after: (action, state) => {console.log('已完成 action:', action.type)}})
}

这对于调试异步请求非常有用。