插件

    Vuex 的 store 接受 选项,这个选项暴露出每次 mutation 的钩子。Vuex 插件就是一个函数,它接收 store 作为唯一参数:

    然后像这样使用:

    1. const store = new Vuex.Store({
    2. // ...
    3. plugins: [myPlugin]
    4. })

    在插件中不允许直接修改状态——类似于组件,只能通过提交 mutation 来触发变化。

    1. const plugin = createWebSocketPlugin(socket)
    2. const store = new Vuex.Store({
    3. state,
    4. mutations,
    5. })

    有时候插件需要获得状态的“快照”,比较改变的前后状态。想要实现这项功能,你需要对状态对象进行深拷贝:

    生成状态快照的插件应该只在开发阶段使用,使用 webpack 或 Browserify,让构建工具帮我们处理:

    1. const store = new Vuex.Store({
    2. plugins: process.env.NODE_ENV !== 'production'
    3. ? [myPluginWithSnapshot]
    4. : []
    5. })

    上面插件会默认启用。在发布阶段,你需要使用 webpack 的 DefinePlugin 或者是 Browserify 的 使 process.env.NODE_ENV !== 'production'false

    createLogger 函数有几个配置项:

    1. const logger = createLogger({
    2. collapsed: false, // 自动展开记录的 mutation
    3. filter (mutation, stateBefore, stateAfter) {
    4. // 若 mutation 需要被记录,就让它返回 true 即可
    5. // 顺便,`mutation` 是个 { type, payload } 对象
    6. transformer (state) {
    7. // 在开始记录之前转换状态
    8. // 例如,只返回指定的子树
    9. return state.subTree
    10. },
    11. mutationTransformer (mutation) {
    12. // mutation 按照 { type, payload } 格式记录
    13. // 我们可以按任意方式格式化
    14. return mutation.type
    15. },
    16. logger: console, // 自定义 console 实现,默认为 `console`

    日志插件还可以直接通过 <script> 标签引入,它会提供全局方法 。

    要注意,logger 插件会生成状态快照,所以仅在开发环境使用。