如何在 Vuex 中实现类似 Pinia 中间件的功能？

在 Vuex 里虽然没有和 Pinia 中间件完全一样的概念，但可以借助 Vuex 的插件和订阅机制来实现类似的功能。下面为你详细介绍实现途径和示例代码。

1. 使用 Vuex 插件

Vuex 插件是一个函数，接收 store 作为参数，在插件内部可以对状态变更、action 执行等进行监听和处理，从而实现类似中间件的功能。

日志记录插件示例

// logPlugin.js
const logPlugin = (store) => {
   
    // 监听状态变更
    store.subscribe((mutation, state) => {
   
        console.log('状态变更前:', state);
        console.log('执行的 mutation:', mutation);
        console.log('状态变更后:', store.state);
    });

    // 监听 action 执行
    store.subscribeAction({
   
        before: (action, state) => {
   
            console.log('Action 执行前:', action, '当前状态:', state);
        },
        after: (action, state) => {
   
            console.log('Action 执行后:', action, '当前状态:', state);
        }
    });
};

export default logPlugin;

在 Vuex 中使用插件

import Vue from 'vue';
import Vuex from 'vuex';
import logPlugin from './logPlugin';

Vue.use(Vuex);

const store = new Vuex.Store({
   
    state: {
   
        count: 0
    },
    mutations: {
   
        increment(state) {
   
            state.count++;
        }
    },
    actions: {
   
        incrementAsync({
    commit }) {
   
            setTimeout(() => {
   
                commit('increment');
            }, 1000);
        }
    },
    plugins: [logPlugin]
});

export default store;

代码解释

• store.subscribe：该方法用于监听状态变更，每当有 mutation 被触发时，会执行回调函数，在回调函数中可以记录状态变更前后的信息。
• store.subscribeAction：此方法用于监听 action 的执行，before 回调在 action 执行前触发，after 回调在 action 执行后触发，可在这两个回调中添加相应的逻辑。

2. 自定义中间件函数

除了使用插件，还能创建自定义的中间件函数，在 action 执行前后插入额外的逻辑。

自定义中间件示例

// actionMiddleware.js
const actionMiddleware = (store) => {
   
    return (next) => {
   
        return (action) => {
   
            // 在 action 执行前执行逻辑
            console.log('Action 即将执行:', action);
            const result = next(action);
            // 在 action 执行后执行逻辑
            console.log('Action 执行完成:', action);
            return result;
        };
    };
};

export default actionMiddleware;

在 Vuex 中应用自定义中间件

import Vue from 'vue';
import Vuex from 'vuex';
import actionMiddleware from './actionMiddleware';

Vue.use(Vuex);

const store = new Vuex.Store({
   
    state: {
   
        count: 0
    },
    mutations: {
   
        increment(state) {
   
            state.count++;
        }
    },
    actions: {
   
        incrementAsync({
    commit }) {
   
            setTimeout(() => {
   
                commit('increment');
            }, 1000);
        }
    }
});

// 应用自定义中间件
const originalDispatch = store.dispatch;
store.dispatch = (action) => {
   
    return actionMiddleware(store)(originalDispatch)(action);
};

export default store;

代码解释

• actionMiddleware 是一个高阶函数，接收 store 作为参数，返回一个接收 next 函数的函数，next 函数通常是原始的 dispatch 函数。在返回的函数中，可以在调用 next(action) 前后添加额外的逻辑。
• 通过重写 store.dispatch 方法，将自定义中间件应用到 action 的分发过程中。

通过上述两种方法，你可以在 Vuex 中实现类似 Pinia 中间件的功能，对状态变更和 action 执行进行监控和处理。