cookiecutter/cookiecutter-django
1
1
Fork 0
mirror of https://github.com/cookiecutter/cookiecutter-django.git synced 2025-08-15 01:14:53 +03:00
Code Issues Packages Projects Releases Wiki Activity

reduce vuex registration boilerplate; easier multi-module usage

Browse Source
This commit is contained in:
ilikerobots 2020-07-20 15:20:01 +03:00
parent 71b24d8a7c
commit 168c846621
5 changed files with 65 additions and 54 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,26 +1,23 @@
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"
import TestModule from "../store/module_test"
const Counter = () => import( /* webpackChunkName: "chunk-counter" */ "../components/Counter.vue");
const CounterBanner = () => import( /* webpackChunkName: "chunk-counter-banner" */ "../components/CounterBanner.vue");
Vue.config.productionTip = false
// Vuex state will be used in this entry point
Vue.use(storePlugin);
// 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.use(VuexAsPlugin);
registerModules( {
'fruit' : {
module: FruitModule,
persistedPaths: ['count', 'activeFruit']
},
'test' : {
store: TestModule
}
)(Vue.prototype.$store);
})
// Mount top level components
new Vue({

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

@ -1,26 +1,18 @@
import Vue from "vue/dist/vue.js";
import storePlugin from "../../store/vuex_store_as_plugin";
import createPersistedState from "vuex-persistedstate";
import {registerModules, VuexAsPlugin} 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({

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

@ -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' %}

17
{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_store_as_plugin.js
View File

@ -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;
}
}

38
{{cookiecutter.project_slug}}/vue_frontend/src/store/vuex_usage_utils.js Normal file
View File

@ -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);
}