From f1b945caea248daad53042b3e5c7b7f4398e5c5d Mon Sep 17 00:00:00 2001
From: duynhana1 <duynhana1@gmail.com>
Date: Fri, 12 Apr 2019 21:40:50 +0300
Subject: [PATCH] improve AppSwitch with computed getter and setter

Here is an example in Vuex docs
https://vuex.vuejs.org/guide/forms.html#two-way-computed-property
---
 components/AppSwitch.vue | 23 +++++++++--------------
 1 file changed, 9 insertions(+), 14 deletions(-)

diff --git a/components/AppSwitch.vue b/components/AppSwitch.vue
index f2eb205..e5746e6 100644
--- a/components/AppSwitch.vue
+++ b/components/AppSwitch.vue
@@ -2,7 +2,7 @@
   <div class="sidearea">
     <h4>Only Show Sale Items</h4>
     <div class="can-toggle demo-rebrand-2">
-      <input id="e" type="checkbox" v-model="trigger" @change="updateSale">
+      <input id="e" type="checkbox" v-model="checked">
       <label for="e">
         <div class="can-toggle__switch" data-checked="Yes" data-unchecked="No"></div>
       </label>
@@ -12,19 +12,14 @@
 
 <script>
 export default {
-  data() {
-    return {
-      trigger: this.checked
-    };
-  },
   computed: {
-    checked() {
-      return this.$store.state.sale;
-    }
-  },
-  methods: {
-    updateSale() {
-      this.$store.commit('switchSale');
+    checked: {
+      get() {
+        return this.$store.state.sale;
+      },
+      set(value) {
+        this.$store.commit('switchSale', value);
+      }
     }
   }
 };
@@ -271,4 +266,4 @@ h4 {
 .sidearea {
   padding-bottom: 30px;
 }
-</style>
\ No newline at end of file
+</style>