Vuex的插件机制代码示例

Vuex的插件机制允许你在Vuex store上添加自定义功能。插件是一个函数，它接收一个store对象作为参数。通过这个store对象，你可以访问其状态、提交mutations、订阅actions等。插件可以用于实现日志记录、持久化存储、数据同步等功能。核心是 plugins这个字段是一个数组。

下面是一个简单的Vuex插件示例，用于记录每次mutation的日志：

// logger.js
const logger = store => {
  // 当store初始化后调用
  store.subscribe((mutation, state) => {
    console.log('mutation: ', mutation.type);
    console.log('payload: ', mutation.payload);
  });
};

export default logger;

这个插件订阅了store上的所有mutation。每当有mutation被提交时，它都会记录mutation的类型和载荷。现在，我们可以将这个插件应用到Vuex store中：

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import logger from './logger';

Vue.use(Vuex);

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  plugins: [logger]
});

export default store;

当我们提交一个mutation时，例如store.commit('increment')，logger插件会在控制台输出如下信息：

mutation: increment
payload: undefined