vue之 vuex 日志监听 createLogger

vuex 内置日志查看函数 createLogger

1.使用

import Vue from 'vue'
import Vuex, { createLogger } from 'vuex'

Vue.use(Vuex)

const debug =  process.env.NODE_ENV === 'development' // 开发环境

export default new Vuex.Store({
  state: {
    name: "songzixian",
    age: 18
  },
  mutations: {
    ADD_AGE(state){
      state.age = state.age + 1
    }
  },
  actions: {
    addAge({commit}){
      commit('ADD_AGE')
    }
  },
  modules: {
  },
  strict: debug, // true 严格使用 mutations 改变 state
  plugins:debug ? [createLogger()] : [] // 开发模式使用日志 非开发不使用
})

2.使用效果

每一次使用vuex 都能观察到数据的使用 mutation
prev state 之前的数据
mutation 当前使用数据
next state 更改完的数据

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