15.04 Add a Computed Getter & Setter

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>

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 = {