diff --git a/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_counter.js b/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_counter.js index c9301a7ae..c757f73ae 100644 --- a/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_counter.js +++ b/{{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} }); diff --git a/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_list.js b/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_list.js index 0d286e9b0..ed41feaae 100644 --- a/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/entry/fruit_list.js +++ b/{{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} }); diff --git a/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/store/module_fruit.js b/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/store/module_fruit.js index 1728f03b5..add8f5730 100644 --- a/{{cookiecutter.project_slug}}/vue_frontend/src/fruit/store/module_fruit.js +++ b/{{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' %} diff --git a/{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_store_as_plugin.js b/{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_store_as_plugin.js deleted file mode 100644 index c51c5ac95..000000000 --- a/{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_store_as_plugin.js +++ /dev/null @@ -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; - } -} \ No newline at end of file diff --git a/{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_usage_utils.js b/{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_usage_utils.js new file mode 100644 index 000000000..dedabd98c --- /dev/null +++ b/{{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); +}