Merge pull request #2 from ilikerobots/vuex_registration_enh

reduce vuex registration boilerplate code

{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_counter.js

@@ -1,6 +1,5 @@
 import Vue from "vue/dist/vue.js";
-import storePlugin from "../../../../vue_frontend/src/store/vuex_store_as_plugin";
-import createPersistedState from "vuex-persistedstate";
+import {VuexAsPlugin, registerModules} from "../../store/vuex_usage_utils";
 import FruitModule from "../store/module_fruit"
 const Counter = () => import( /* webpackChunkName: "chunk-counter" */ "../components/Counter.vue");
 const CounterBanner = () => import( /* webpackChunkName: "chunk-counter-banner" */ "../components/CounterBanner.vue");
@@ -8,27 +7,22 @@ const CounterBanner = () => import( /* webpackChunkName: "chunk-counter-banner"
 Vue.config.productionTip = false
 
 // Vuex state will be used in this entry point
-Vue.use(storePlugin);
+Vue.use(VuexAsPlugin);
 
-// Include Vuex modules as needed for this entry point
-Vue.prototype.$store.registerModule('fruit', FruitModule);
-
-// Designate what state should persist across page loads
-createPersistedState({
-        paths: [
-            "fruit.count",
-            "fruit.activeFruit",
-        ]
-    }
-)(Vue.prototype.$store);
+registerModules( {
+    'fruit' : {
+        module: FruitModule,
+        persistedPaths: ['count', 'activeFruit']
+    },
+})
 
 // Mount top level components
 new Vue({
-  el: "#app",
-  components: {Counter}
+    el: "#app",
+    components: {Counter}
 });
 
 new Vue({
-  el: "#counter_banner",
-  components: {CounterBanner}
+    el: "#counter_banner",
+    components: {CounterBanner}
 });

{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_list.js

@@ -1,30 +1,22 @@
 import Vue from "vue/dist/vue.js";
-import storePlugin from "../../store/vuex_store_as_plugin";
-import createPersistedState from "vuex-persistedstate";
+import {VuexAsPlugin, registerModules} from "../../store/vuex_usage_utils";
 import FruitModule from "../store/module_fruit"
 const FruitInspector = () => import( /* webpackChunkName: "chunk-fruit-inspector" */ "../components/FruitInspector.vue");
 
 Vue.config.productionTip = false
 
-// Vuex state will be used in this entry point
-Vue.use(storePlugin);
+Vue.use(VuexAsPlugin);
 
-// Include Vuex modules as needed for this entry point
-Vue.prototype.$store.registerModule('fruit', FruitModule);
-
-
-// Designate what state should persist across page loads
-createPersistedState({
-      paths: [
-        "fruit.count",
-        "fruit.activeFruit",
-      ]
-    }
-)(Vue.prototype.$store);
+registerModules( {
+    'fruit' : {
+        module: FruitModule,
+        persistedPaths: ['count', 'activeFruit']
+    },
+})
 
 // Mount top level components
 new Vue({
-  el: "#app",
-  components: {FruitInspector}
+    el: "#app",
+    components: {FruitInspector}
 });
 

{{cookiecutter.project_slug}}/vue_frontend/src/fruit/store/module_fruit.js

@@ -1,7 +1,7 @@
 {%- if cookiecutter.use_drf == 'y' -%}
 import api from "../../rest/rest";
     
-{%- endif -%}
+{% endif -%}
 export const MAX_COUNT = 42
 export const MIN_COUNT = 0
 
@@ -20,6 +20,7 @@ const MUTATION_INCREMENT_COUNTER = 'MUT_INC_COUNT'
 const MUTATION_DECREMENT_COUNTER = 'MUT_DEC_COUNT'
 
 export default {
+    namespaced: false,
     state: {
         count: 0,
         {%- if cookiecutter.use_drf == 'y' %}

{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_store_as_plugin.js

@@ -1,17 +0,0 @@
-import Vue from "vue/dist/vue.js";
-import Vuex from "vuex";
-
-Vue.use(Vuex);
-
-let store = new Vuex.Store({
-    modules: {
-    },
-    strict: process.env.NODE_ENV !== "production",
-});
-
-export default {
-    store,
-    install(Vue) { //resetting the default store to use this plugin store
-        Vue.prototype.$store = store;
-    }
-}

{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_usage_utils.js

@@ -0,0 +1,38 @@
+import Vue from "vue/dist/vue.js";
+import Vuex from "vuex";
+import createPersistedState from "vuex-persistedstate";
+
+Vue.use(Vuex);
+
+let store = new Vuex.Store({
+    modules: {},
+    strict: process.env.NODE_ENV !== "production",
+});
+
+function registerModule(moduleName, module) {
+    Vue.prototype.$store.registerModule(moduleName, module);
+}
+
+function persistState(persistentPaths) {
+    createPersistedState({paths: persistentPaths})(Vue.prototype.$store)
+}
+
+export const VuexAsPlugin = {
+    store,
+    install(Vue) { //resetting the default store to use this plugin store
+        Vue.prototype.$store = store;
+    }
+}
+
+export function registerModules(modulesDef) {
+    let persisted = [];
+    for (let [mName, mDef] of Object.entries(modulesDef)) {
+        if ('module' in mDef) {
+            registerModule(mName, mDef['module']);
+        }
+        if ('persistedPaths' in mDef) {
+            persisted = persisted.concat(mDef['persistedPaths'].map(p => mName + "." + p))
+        }
+    }
+    persistState(persisted);
+}