15.03 Vuex - Create a Settings Store

src/pages/PageSettings.vue

@@ -19,11 +19,14 @@
 </template>
 
 <script>
+import { mapGetters } from 'vuex'
+
 export default {
   name: 'PageSettings',
-  data () {
-    return {
-      show12HourTimeFormat: false
+  computed: {
+    ...mapGetters('settings', ['settings']),
+    show12HourTimeFormat () {
+      return this.settings.show12HourTimeFormat
     }
   }
 }

src/store/index.js

@@ -2,6 +2,7 @@ import Vue from 'vue'
 import Vuex from 'vuex'
 
 import tasks from './store-tasks'
+import settings from './store-settings'
 
 Vue.use(Vuex)
 
@@ -17,7 +18,8 @@ Vue.use(Vuex)
 export default function (/* { ssrContext } */) {
   const Store = new Vuex.Store({
     modules: {
-      tasks
+      tasks,
+      settings
     },
 
     // enable strict mode (adds overhead!)

src/store/store-settings.js

@@ -0,0 +1,25 @@
+const state = {
+  settings: {
+    show12HourTimeFormat: false
+  }
+}
+
+const mutations = {
+}
+
+const actions = {
+}
+
+const getters = {
+  settings: state => {
+    return state.settings
+  }
+}
+
+export default {
+  namespaced: true,
+  state,
+  mutations,
+  actions,
+  getters
+}