add a clear button in ErrorLog component

src/components/ErrorLog/index.vue

@@ -6,7 +6,11 @@
       </el-button>
     </el-badge>
 
-    <el-dialog :visible.sync="dialogTableVisible" title="Error Log" width="80%" append-to-body>
+    <el-dialog :visible.sync="dialogTableVisible" width="80%" append-to-body>
+      <div slot="title">
+        <span style="padding-right: 10px;">Error Log</span>
+        <el-button size="mini" type="primary" icon="el-icon-delete" @click="clearAll">Clear All</el-button>
+      </div>
       <el-table :data="errorLogs" border>
         <el-table-column label="Message">
           <template slot-scope="{row}">
@@ -54,6 +58,12 @@ export default {
     errorLogs() {
       return this.$store.getters.errorLogs
     }
+  },
+  methods: {
+    clearAll() {
+      this.dialogTableVisible = false
+      this.$store.dispatch('errorLog/clearErrorLog')
+    }
   }
 }
 </script>

src/store/modules/errorLog.js

@@ -5,12 +5,18 @@ const state = {
 const mutations = {
   ADD_ERROR_LOG: (state, log) => {
     state.logs.push(log)
+  },
+  CLEAR_ERROR_LOG: (state) => {
+    state.logs.splice(0)
   }
 }
 
 const actions = {
   addErrorLog({ commit }, log) {
     commit('ADD_ERROR_LOG', log)
+  },
+  clearErrorLog({ commit }) {
+    commit('CLEAR_ERROR_LOG')
   }
 }