vuex 手动封装一个日志快照插件

---

前言

学习手动封装vuex 插件

---

提示：以下是本篇文章正文内容，下面案例可供参考

一、vuex 插件是什么？

示例：vuex 插件 是基于 vuex开发的，类似于 中间件 观察数据流内容

二、开发前置

1. 先阅读官方手册

点击跳转官方链接 vuex 插件编写

2. 官方事例

代码如下（示例）：

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'loadsh'
Vue.use(Vuex)

const myPluginWithSnapshot = store => {
  let prevState = _.cloneDeep(store.state)
  store.subscribe((mutation, state) => {
    let nextState = _.cloneDeep(state)

    // 比较 prevState 和 nextState...

    // 保存状态，用于下一次 mutation
    prevState = nextState
  })
}

export default new Vuex.Store({
  // ...
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPluginWithSnapshot]
    : []
})

---

三、开发插件

1. 明确需求

按照这种开始开发

2. 编写

2.1 可以查看上一次数据、中间传递数据 和 更改过的数据

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'loadsh'
Vue.use(Vuex)

const myPluginWithSnapshot = store => {
  // 上一次的值
  let prevState = _.cloneDeep(store.state)

  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
    console.log("prev state", prevState)
    console.log("mutation", mutation)
    console.log("next state", state)
    
    // 更新上一次的值
    prevState = _.cloneDeep(state);
  })
}

export default new Vuex.Store({
  // ...
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPluginWithSnapshot]
    : []
})

效果如下

2.2 利用 console.groupCollapsed 、 console.groupEnd 方法包裹内容

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'loadsh'
import moment from 'moment'
Vue.use(Vuex)

const myPluginWithSnapshot = store => {
  // 上一次的值
  let prevState = _.cloneDeep(store.state)

  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
  	console.groupCollapsed(`mutation %c${mutation.type} ==> ${moment(Date.now()).format('HH:mm:ss.SSS')}`, 'color:#3fd1c4')
    console.log("prev state", prevState)
    console.log("mutation", mutation)
    console.log("next state", state)
    console.groupEnd()
    
    // 更新上一次的值
    prevState = _.cloneDeep(state);
  })
}

export default new Vuex.Store({
  // ...
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPluginWithSnapshot]
    : []
})

2.3 优化

基本功能已经实现，但是跟模仿的插件还是有点区别， 没有人家的好看， 优化利用 console.log 可以使用颜色来改造

import Vue from 'vue'
import Vuex from 'vuex'
import _ from 'loadsh'
import moment from 'moment'
Vue.use(Vuex)

export const getDate = () => {
    return moment(Date.now()).format('HH:mm:ss.SSS')
}

// console.log 重写
export const log = ({title= '', value = '', color = '#ccc'}) => {
    console.log(`%c${title} %o`, `color:${color}`, value)
}

// console.group 重写
export const group = (title, color, fn) => {
    console.groupCollapsed(title, color)
    fn()
    console.groupEnd()
}

const myPluginWithSnapshot = store => {
  // 上一次的值
  let prevState = _.cloneDeep(store.state)

  // 当 store 初始化后调用
  store.subscribe((mutation, state) => {
      group(`mutation %c${mutation.type} ==> ${getDate()}`, 'color:#3fd1c4', ()=>{
          log({
              title: "prev state",
              value: prevState
          });
          log({
              title: "mutation",
              value: mutation,
              color: '#1eabf1'
          });
          log({
              title: "next state",
              value: state,
              color: '#34c648'
          });
      })
      // 更新上一次的值
      prevState = _.cloneDeep(state);
  })
}

export default new Vuex.Store({
  // ...
  plugins: process.env.NODE_ENV !== 'production'
    ? [myPluginWithSnapshot]
    : []
})

优化效果如下

总结

总体来说，自己搞的日志快照没有 vuex 内置的好用，但是起码学习到怎么自己封装一个vuex插件，还是很有好处的

欢迎点赞、评论、收藏，谢谢 ( ｡ớ ₃ờ)ھ