Store选项

回首Vue3之状态管理篇（一）提到了Store在Vuex4.x中的获取方式，不了解的可以传送门看一下。

plugins

当我们需要使用一些插件的时候，可以使用此选项plugins，这个选项暴露出每次 mutation 的钩子。这些插件直接接收store 作为唯一参数，可以监听 mutation（用于外部地数据持久化、记录或调试）或者提交 mutation （用于内部数据，例如 websocket 或某些观察者）。

其实Vuex 插件就是一个函数，它接收 store 作为唯一参数：

const myPlugin = (store) => {
  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    // 每次 mutation 之后调用
    // mutation 的格式为 { type, payload }
  })
}

使用如下：

const store = createStore({
  // ...
  plugins: [myPlugin]
})

在插件中不允许直接修改状态——类似于组件，只能通过提交 mutation 来触发变化。通过提交 mutation，插件可以用来同步数据源到 store，如下：

export default function createWebSocketPlugin (socket) {
  return (store) => {
    socket.on('data', data => {
      store.commit('receiveData', data)
    })
    store.subscribe(mutation => {
      if (mutation.type === 'UPDATE_DATA') {
        socket.emit('update', mutation.payload)
      }
    })
  }
}

总结

我们需要注意的是：插件类似于组件，插件中也不允许直接修改状态，只能通过提交mutation来改变状态。

想了解更多文章，传送门已开启：回首Vue3目录篇！

回首Vue3之状态管理篇（四）

Store选项

plugins

总结