Vuex日誌功能實現

目錄

✦ 前言

✦ 參考文章

✦ Vuex中使用日誌功能

✦ 整體代碼

✦ 效果圖

---

✦ 前言

本篇文章按照提供的GitHub上的代碼，再去實現Vuex自帶的日誌功能，也就是說如果要使用Vuex自帶的日誌功能，需要先執行

npm install --save vuex

我們首先要知道的是Vuex是對狀態的監控，不等同於logger

✦ 參考文章

1. vuex使用logger的日誌功能
2. vuex踩坑日誌（一）
3. 當前案例使用的源代碼

✦ Vuex中使用日誌功能

1. 1 ➢ ../src/store/store.js

/* 日誌 start*/
import createLogger from 'vuex/dist/logger'
const debug = process.env.NODE_ENV !== 'production'
/* 日誌 end */

1. 2 ➢ ../src/store/store.js

var store=new Vuex.Store({
   ...
   plugins: debug ? [createLogger()] : []
   ...
});

1. 3 ➢ ../src/main.js

import store from "./store/store.js";

1. 4 ➢ 項目結構

✦ 整體代碼

import Vue from "vue";
import Vuex from "vuex";
import mutations from "./mutation.js";
import getters from "./getter";

/* 日誌 start*/
import createLogger from 'vuex/dist/logger'
const debug = process.env.NODE_ENV !== 'production'
/* 日誌 end */

Vue.use(Vuex);
//定義數據
var state={
  names:"name",
  age:"12",
  count:0,
  arr:[1,2,3]
};


var store=new Vuex.Store({
    state,
    mutations,
    getters,
    plugins: debug ? [createLogger()] : []

});


export default store;

✦ 效果圖

✦