✨ Add lazy store example

Author: prd-y-nguyen

.vscode/settings.json

@@ -28,6 +28,7 @@
       "interfaces": "typescript",
       "decorators": "typescript",
       "mixins": "vue",
+      "store-*": "vuex",
       "use": "mappings",
   },
 

src/core/README.md

@@ -0,0 +1 @@
+# Be careful modifying these core folders

src/main.js

@@ -21,6 +21,8 @@ import App from '@/App.vue'
 import '@/core/styles/css/main.css'
 import '@/core/styles/scss/main.scss'
 
+import '@/styles/custom.scss'
+
 Vue.mixin(globalMixin)
 
 Vue.use(clientApi)

src/pages/projects/[slug]/index.vue

@@ -5,8 +5,22 @@
   </div>
 </template>
 <script>
-import { defineComponent } from '@vue/composition-api'
+import { store } from '@/store'
+import { defineComponent, onUnmounted } from '@vue/composition-api'
+import { projectDetail } from '@/store-lazy/project-detail'
 export default defineComponent({
   name: 'ProjectWrapperPage',
+  setup() {
+    // Dynamic vuex module
+    if (!store.hasModule('projectDetail')) {
+      store.registerModule('projectDetail', projectDetail, {
+        preserveState: false,
+      })
+    }
+    // Only exist when viewing this page and it's sub-pages
+    onUnmounted(() => {
+      store.unregisterModule('projectDetail')
+    })
+  },
 })
 </script>

src/store-lazy/.gitkeep

@@ -0,0 +1 @@
+export const actions = {}

src/store-lazy/project-detail/actions.js

@@ -0,0 +1,3 @@
+export const projectDetailActions = {}
+
+export const projectDetailMutations = {}

src/store-lazy/project-detail/enums.js

@@ -0,0 +1 @@
+export const getters = {}

src/store-lazy/project-detail/getters.js

@@ -0,0 +1,11 @@
+import { state } from './state'
+import { getters } from './getters'
+import { mutations } from './mutations'
+import { actions } from './actions'
+export const projectDetail = {
+  namespaced: true,
+  state,
+  getters,
+  mutations,
+  actions,
+}

src/store-lazy/project-detail/index.js

@@ -0,0 +1 @@
+export const mutations = {}