Merge pull request #41 from tomatoaiu/feat/kpt

refactor: use actions of vuex
tomatoaiu · May 24, 2018 · fe35784 · fe35784
2 parents 7962bd1 + 1d39a04
commit fe35784
Show file tree

Hide file tree

Showing 2 changed files with 51 additions and 35 deletions.
diff --git a/pages/kpt.vue b/pages/kpt.vue
@@ -70,7 +70,7 @@
           <template slot="selection" slot-scope="data">
             <v-chip
               close
-              @input="removeKeep(data.item)"
+              @input="removeKeep(({ date, item: data.item }))"
               :selected="data.selected"
               :color="kptColor.keep"
               text-color="white"
@@ -95,7 +95,7 @@
           <template slot="selection" slot-scope="data">
             <v-chip
               close
-              @input="removeProblem(data.item)"
+              @input="removeProblem(({ date, item: data.item }))"
               :selected="data.selected"
               :color="kptColor.problem"
               text-color="white"
@@ -120,7 +120,7 @@
           <template slot="selection" slot-scope="data">
             <v-chip
               close
-              @input="removeTry(data.item)"
+              @input="removeTry(({ date, item: data.item }))"
               :selected="data.selected"
               :color="kptColor.try"
               text-color="white"
@@ -136,7 +136,7 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   data () {
@@ -158,23 +158,23 @@ export default {
         return this.getEachKpt('keep')
       },
       set (list) {
-        this.setEachKpt('kpt/setKeep', list)
+        this.setKeep({ date: this.date, list })
       }
     },
     kptProblem: {
       get () {
         return this.getEachKpt('problem')
       },
       set (list) {
-        this.setEachKpt('kpt/setProblem', list)
+        this.setProblem({ date: this.date, list })
       }
     },
     kptTry: {
       get () {
         return this.getEachKpt('try')
       },
       set (list) {
-        this.setEachKpt('kpt/setTry', list)
+        this.setTry({ date: this.date, list })
       }
     }
   },
@@ -187,21 +187,21 @@ export default {
   },
   mounted () {
     this.date = new Date().toJSON().slice(0, 10).replace(/-/g, '-')
+    if (!this.hasDate(this.date)) {
+      this.setNewKpt(this.date)
+    }
     this.setRegisterDates()
   },
   methods: {
-    removeEachKpt (kptWord, item) {
-      this.$store.commit(kptWord, { date: this.date, item })
-    },
-    removeKeep (item) {
-      this.removeEachKpt('kpt/removeKeep', item)
-    },
-    removeProblem (item) {
-      this.removeEachKpt('kpt/removeProblem', item)
-    },
-    removeTry (item) {
-      this.removeEachKpt('kpt/removeTry', item)
-    },
+    ...mapActions({
+      setKpt: 'kpt/setKpt',
+      setKeep: 'kpt/setKeep',
+      setProblem: 'kpt/setProblem',
+      setTry: 'kpt/setTry',
+      removeKeep: 'kpt/removeKeep',
+      removeProblem: 'kpt/removeProblem',
+      removeTry: 'kpt/removeTry'
+    }),
     hasDate (date) {
       if (date in this.kpt) {
         return true
@@ -214,16 +214,8 @@ export default {
         return this.kpt[this.date][kptWord]
       }
     },
-    setEachKpt (mutationWord, list) {
-      if (this.hasDate(this.date)) {
-        this.$store.commit(mutationWord, { date: this.date, list })
-      } else {
-        this.setNewKpt(this.date)
-        this.$store.commit(mutationWord, { date: this.date, list })
-      }
-    },
     setNewKpt (date) {
-      this.$store.commit('kpt/setKpt', {
+      this.setKpt({
         date,
         content: { keep: [], problem: [], try: [] }
       })

diff --git a/store/kpt.js b/store/kpt.js
@@ -14,29 +14,53 @@ export const state = () => ({
 })
 
 export const mutations = {
-  setKpt (state, { date, content }) {
+  SET_KPT (state, { date, content }) {
     state.kpt[date] = content
   },
-  setKeep (state, { date, list }) {
+  SET_KEEP (state, { date, list }) {
     state.kpt[date].keep = list
   },
-  setProblem (state, { date, list }) {
+  SET_PROBLEM (state, { date, list }) {
     state.kpt[date].problem = list
   },
-  setTry (state, { date, list }) {
+  SET_TRY (state, { date, list }) {
     state.kpt[date].try = list
   },
-  removeKeep (state, { date, item }) {
+  REMOVE_KEEP (state, { date, item }) {
     state.kpt[date].keep.splice(state.kpt[date].keep.indexOf(item), 1)
   },
-  removeProblem (state, { date, item }) {
+  REMOVE_PROBLEM (state, { date, item }) {
     state.kpt[date].problem.splice(state.kpt[date].problem.indexOf(item), 1)
   },
-  removeTry (state, { date, item }) {
+  REMOVE_TRY (state, { date, item }) {
     state.kpt[date].try.splice(state.kpt[date].try.indexOf(item), 1)
   }
 }
 
+export const actions = {
+  setKpt ({ commit }, { date, content }) {
+    commit('SET_KPT', { date, content })
+  },
+  setKeep ({ commit }, { date, list }) {
+    commit('SET_KEEP', { date, list })
+  },
+  setProblem ({ commit }, { date, list }) {
+    commit('SET_PROBLEM', { date, list })
+  },
+  setTry ({ commit }, { date, list }) {
+    commit('SET_TRY', { date, list })
+  },
+  removeKeep ({ commit }, { date, item }) {
+    commit('REMOVE_KEEP', { date, item })
+  },
+  removeProblem ({ commit }, { date, item }) {
+    commit('REMOVE_PROBLEM', { date, item })
+  },
+  removeTry ({ commit }, { date, item }) {
+    commit('REMOVE_TRY', { date, item })
+  }
+}
+
 export const getters = {
   kpt: state => state.kpt
 }