面试题：如何实现 Vuex 中 store 的插件？

在 Vuex 中，插件（Plugin）是一种用于扩展 Vuex 功能的机制。插件可以在 Vuex 的 store 初始化时注入自定义逻辑，例如持久化存储、日志记录、状态同步等。以下是实现 Vuex 插件的详细步骤和示例：

1. 插件的基本结构

Vuex 插件是一个函数，接收 store 作为参数。在插件函数中，可以通过 store 访问 Vuex 的 API，如 state、getters、mutations、actions 等。

插件函数的基本结构：

const myPlugin = (store) => {
  // 在 store 初始化时调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 后调用
    console.log('mutation:', mutation);
    console.log('state:', state);
  });
};

2. 插件的使用

在创建 Vuex store 时，通过 plugins 选项将插件添加到 store 中。

示例：

import { createStore } from 'vuex';

const store = createStore({
  state: {
    count: 0,
  },
  mutations: {
    increment(state) {
      state.count++;
    },
  },
  plugins: [myPlugin], // 添加插件
});

export default store;

3. 插件的常见用途

以下是 Vuex 插件的一些常见用途：

3.1 日志记录

在每次 mutation 后记录状态变化。

示例：

const loggerPlugin = (store) => {
  store.subscribe((mutation, state) => {
    console.log('mutation type:', mutation.type);
    console.log('mutation payload:', mutation.payload);
    console.log('state after mutation:', state);
  });
};

3.2 持久化存储

将 Vuex 的状态持久化到 localStorage 或 sessionStorage。

示例：

const persistPlugin = (store) => {
  // 初始化时从 localStorage 恢复状态
  const savedState = JSON.parse(localStorage.getItem('vuex-state'));
  if (savedState) {
    store.replaceState(savedState);
  }

  // 每次 mutation 后保存状态
  store.subscribe((mutation, state) => {
    localStorage.setItem('vuex-state', JSON.stringify(state));
  });
};

3.3 状态同步

在多个浏览器标签页之间同步 Vuex 的状态。

示例：

const syncPlugin = (store) => {
  window.addEventListener('storage', (event) => {
    if (event.key === 'vuex-state') {
      const newState = JSON.parse(event.newValue);
      store.replaceState(newState);
    }
  });

  store.subscribe((mutation, state) => {
    localStorage.setItem('vuex-state', JSON.stringify(state));
  });
};

3.4 异步操作监控

监控 Vuex 的异步操作（如 actions），并记录执行时间。

示例：

const asyncMonitorPlugin = (store) => {
  store.subscribeAction({
    before: (action, state) => {
      console.log(`Action "${action.type}" started`);
      action.startTime = Date.now();
    },
    after: (action, state) => {
      console.log(`Action "${action.type}" finished in ${Date.now() - action.startTime}ms`);
    },
  });
};

4. 插件的配置

插件可以接收配置参数，以便更灵活地使用。

示例：

const configurablePlugin = (options = {}) => {
  return (store) => {
    store.subscribe((mutation, state) => {
      if (options.logMutations) {
        console.log('mutation:', mutation);
      }
      if (options.saveState) {
        localStorage.setItem('vuex-state', JSON.stringify(state));
      }
    });
  };
};

const store = createStore({
  state: { count: 0 },
  mutations: { increment(state) { state.count++; } },
  plugins: [configurablePlugin({ logMutations: true, saveState: true })], // 配置插件
});

5. 插件的注意事项

性能影响：插件会在每次 mutation 或 action 时执行，因此应避免在插件中执行耗时的操作。
状态污染：插件可以直接修改 store 的状态，因此应谨慎操作，避免破坏状态的一致性。
插件顺序：插件的执行顺序与它们在 plugins 数组中的顺序一致，因此需要注意插件的依赖关系。

6. 总结

Vuex 插件是一种强大的扩展机制，可以用于实现日志记录、持久化存储、状态同步等功能。插件的基本结构是一个接收 store 参数的函数，通过 store.subscribe 或 store.subscribeAction 监听状态变化或操作。通过合理使用插件，可以增强 Vuex 的功能，提升开发效率和用户体验。

THE END