From ff3233fa49dbed5513d8770871a033e754a79da2 Mon Sep 17 00:00:00 2001
From: Fredrick W Warren <fredwarren@gmail.com>
Date: Thu, 11 Feb 2021 15:57:52 -0800
Subject: [PATCH] 15.04 Add a Computed Getter & Setter

---
 src/pages/PageSettings.vue  | 14 +++++++++++---
 src/store/store-settings.js |  6 ++++++
 2 files changed, 17 insertions(+), 3 deletions(-)

diff --git a/src/pages/PageSettings.vue b/src/pages/PageSettings.vue
index 3b3e940..b102054 100644
--- a/src/pages/PageSettings.vue
+++ b/src/pages/PageSettings.vue
@@ -19,15 +19,23 @@
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
+import { mapGetters, mapActions } from 'vuex'
 
 export default {
   name: 'PageSettings',
   computed: {
     ...mapGetters('settings', ['settings']),
-    show12HourTimeFormat () {
-      return this.settings.show12HourTimeFormat
+    show12HourTimeFormat: {
+      get () {
+        return this.settings.show12HourTimeFormat
+      },
+      set (value) {
+        this.setShow12HourTimeFormat(value)
+      }
     }
+  },
+  methods: {
+    ...mapActions('settings', ['setShow12HourTimeFormat'])
   }
 }
 </script>
diff --git a/src/store/store-settings.js b/src/store/store-settings.js
index 4609ea2..6c4e521 100644
--- a/src/store/store-settings.js
+++ b/src/store/store-settings.js
@@ -5,9 +5,15 @@ const state = {
 }
 
 const mutations = {
+  setShow12HourTimeFormat (state, value) {
+    state.settings.show12HourTimeFormat = value
+  }
 }
 
 const actions = {
+  setShow12HourTimeFormat ({ commit }, value) {
+    commit('setShow12HourTimeFormat', value)
+  }
 }
 
 const getters = {