⚡ Implements a very very basic config store

src/App.vue

@@ -11,7 +11,7 @@
 import Header from '@/components/PageStrcture/Header.vue';
 import Footer from '@/components/PageStrcture/Footer.vue';
 import LoadingScreen from '@/components/PageStrcture/LoadingScreen.vue';
-import { componentVisibility } from '@/utils/ConfigHelpers';
+// import { componentVisibility } from '@/utils/ConfigHelpers';
 import ConfigAccumulator from '@/utils/ConfigAccumalator';
 import { welcomeMsg } from '@/utils/CoolConsole';
 import ErrorHandler from '@/utils/ErrorHandler';
@@ -23,8 +23,9 @@ import {
 } from '@/utils/defaults';
 
 const Accumulator = new ConfigAccumulator();
-const config = Accumulator.config();
+const config2 = Accumulator.config();
-const visibleComponents = componentVisibility(config.appConfig) || defaultVisibleComponents;
+// const visibleComponents = componentVisibility(config.appConfig) || defaultVisibleComponents;
+const visibleComponents = defaultVisibleComponents;
 
 export default {
   name: 'app',
@@ -34,15 +35,13 @@ export default {
     LoadingScreen,
   },
   provide: {
-    config,
+    config: config2,
     visibleComponents,
   },
   data() {
     return {
       isLoading: true, // Set to false after mount complete
       showFooter: visibleComponents.footer,
-      appConfig: Accumulator.appConfig(),
-      pageInfo: Accumulator.pageInfo(),
       visibleComponents,
     };
   },
@@ -55,6 +54,21 @@ export default {
     shouldShowSplash() {
       return (this.visibleComponents || defaultVisibleComponents).splashScreen;
     },
+    config() {
+      return this.$store.state.config;
+    },
+    appConfig() {
+      return this.$store.getters.appConfig;
+    },
+    pageInfo() {
+      return this.$store.getters.pageInfo;
+    },
+    sections() {
+      return this.$store.getters.pageInfo;
+    },
+  },
+  created() {
+    this.$store.dispatch('initializeConfig');
   },
   methods: {
     /* Injects the users custom CSS as a style tag */

src/store.js

@@ -1,17 +1,44 @@
+/* eslint-disable no-param-reassign */
 import Vue from 'vue';
 import Vuex from 'vuex';
+import Keys from '@/utils/StoreMutations';
+import ConfigAccumulator from '@/utils/ConfigAccumalator';
 
 Vue.use(Vuex);
 
+const { UPDATE_CONFIG } = Keys;
+
 const store = new Vuex.Store({
   state: {
-    count: 0,
+    config: {},
+  },
+  getters: {
+    config(state) {
+      return state.config;
+    },
+    pageInfo(state) {
+      return state.config.pageInfo || {};
+    },
+    appConfig(state) {
+      return state.config.appConfig || {};
+    },
+    sections(state) {
+      return state.config.sections || [];
+    },
   },
   mutations: {
-    increment(state) {
+    [UPDATE_CONFIG](state, config) {
-      state.count++;
+      state.config = config;
     },
   },
+  actions: {
+    initializeConfig({ commit }) {
+      const Accumulator = new ConfigAccumulator();
+      const config = Accumulator.config();
+      commit(UPDATE_CONFIG, config);
+    },
+  },
+  modules: {},
 });
 
 export default store;

src/utils/StoreMutations.js

@@ -0,0 +1,9 @@
+// A list of mutation names
+const KEY_NAMES = [
+  'UPDATE_CONFIG',
+];
+
+// Convert array of key names into an object, and export
+const MUTATIONS = {};
+KEY_NAMES.forEach((key) => { MUTATIONS[key] = key; });
+export default MUTATIONS;