除了 Pinia，还有哪些状态管理库可以实现类似的中间件功能？

除了 Pinia，以下几种常见的状态管理库也能够实现类似中间件的功能：

1. Vuex

Vuex 是专门为 Vue.js 应用程序开发的状态管理模式。它内置了中间件机制，允许开发者在状态变更前后执行自定义逻辑。

中间件实现示例

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

// 定义中间件
const myMiddleware = store => {
   
    // 在状态变更前执行逻辑
    store.subscribe((mutation, state) => {
   
        console.log('Before mutation:', state);
    });

    // 在 action 执行前后执行逻辑
    store.subscribeAction({
   
        before: (action, state) => {
   
            console.log(`Before action ${
     action.type}:`, state);
        },
        after: (action, state) => {
   
            console.log(`After action ${
     action.type}:`, state);
        }
    });
};

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

export default store;

2. Redux

Redux 是一个用于管理 JavaScript 应用程序状态的可预测状态容器，它本身没有直接的中间件概念，但通过 redux-thunk、redux-promise、redux-saga 等中间件库可以实现异步操作和额外的逻辑处理。

使用 redux-thunk 中间件示例

import {
    createStore, applyMiddleware } from 'redux';
import thunk from 'redux-thunk';

// 定义 reducer
const counterReducer = (state = {
    count: 0 }, action) => {
   
    switch (action.type) {
   
        case 'INCREMENT':
            return {
    count: state.count + 1 };
        default:
            return state;
    }
};

// 自定义中间件
const loggerMiddleware = store => next => action => {
   
    console.log('Dispatching action:', action);
    const result = next(action);
    console.log('New state:', store.getState());
    return result;
};

// 创建 store 并应用中间件
const store = createStore(
    counterReducer,
    applyMiddleware(thunk, loggerMiddleware)
);

// 分发 action
store.dispatch({
    type: 'INCREMENT' });

3. MobX

MobX 是一个简单、可扩展的状态管理库，通过 autorun、reaction 等函数可以实现类似中间件的功能，在状态变化时执行自定义逻辑。

中间件实现示例

import {
    makeObservable, observable, action } from 'mobx';

class CounterStore {
   
    count = 0;

    constructor() {
   
        makeObservable(this, {
   
            count: observable,
            increment: action
        });

        // 监听状态变化
        const disposer = autorun(() => {
   
            console.log('Count changed:', this.count);
            // 可以在这里添加额外的逻辑
        });
    }

    increment() {
   
        this.count++;
    }
}

const counterStore = new CounterStore();
counterStore.increment();

4. Recoil

Recoil 是用于 React 应用的状态管理库，通过 selector 和 atom 可以实现状态管理，并且可以在 selector 中添加额外的逻辑，类似于中间件。

中间件实现示例

import {
    atom, selector, useRecoilState, useRecoilValue } from 'recoil';

// 定义 atom
const counterState = atom({
   
    key: 'counterState',
    default: 0
});

// 定义 selector，添加额外逻辑
const counterSelector = selector({
   
    key: 'counterSelector',
    get: ({
    get }) => {
   
        const count = get(counterState);
        console.log('Current count:', count);
        return count;
    },
    set: ({
    set }, newValue) => {
   
        console.log('Setting new count:', newValue);
        set(counterState, newValue);
    }
});

const App = () => {
   
    const [count, setCount] = useRecoilState(counterSelector);

    const increment = () => {
   
        setCount(count + 1);
    };

    return (
        <div>
            <p>Count: {
   count}</p>
            <button onClick={
   increment}>Increment</button>
        </div>
    );
};

export default App;

这些状态管理库都有各自的特点和适用场景，你可以根据项目的具体需求选择合适的库来实现类似中间件的功能。