got dynamic store module to work

using @urbn/vuex-helpers

package-lock.json

@@ -3087,6 +3087,11 @@
       "integrity": "sha512-gCubfBUZ6KxzoibJ+SCUc/57Ms1jz5NjHe4+dI2krNmU5zCPAphyLJYyTOg06ueIyfj+SaCUqmzun7ImlxDcKg==",
       "dev": true
     },
+    "@urbn/vuex-helpers": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@urbn/vuex-helpers/-/vuex-helpers-0.1.0.tgz",
+      "integrity": "sha512-9yPAWnCA8JHNrebU/dh0/Zz/6ojZc+xL25eNjIhDuuR4TgRLOLpAeY3+JH3WkF3DfebD/F5FQ6qBHmA76rXjHw=="
+    },
     "@vue/component-compiler-utils": {
       "version": "3.1.2",
       "resolved": "https://registry.npmjs.org/@vue/component-compiler-utils/-/component-compiler-utils-3.1.2.tgz",

package.json

@@ -19,6 +19,7 @@
   "license": "MIT",
   "dependencies": {
     "@tweenjs/tween.js": "^18.6.0",
+    "@urbn/vuex-helpers": "^0.1.0",
     "axios": "^0.18.1",
     "dat.gui": "^0.7.7",
     "oimo": "^1.0.9",

src/App.vue

@@ -40,7 +40,8 @@
               <project
                 v-for="(project) in projects"
                 :key="project.id"
-                :data="project"
+                :id="project.id"
+                :title="project.Titre"
               />
             </template>
 

src/components/objects/Project.vue

@@ -1,9 +1,9 @@
 <template>
   <div>
-    <object3d ref="block3d" name="Project" :obj="building" :position="building_position"/>
-    <object3d ref="top" :obj="top_mesh" :position="top_position"/>
-    <object3d ref="floor" :obj="floor_mesh" :position="floor_position"/>
-    <object3d ref="level" :obj="level_mesh" :position="level_position"/>
+    <object3d ref="block3d" name="Project" :obj="building" :position="building_position" />
+    <object3d ref="top" :obj="top_mesh" :position="top_position" />
+    <object3d ref="floor" :obj="floor_mesh" :position="floor_position" />
+    <object3d ref="level" :obj="level_mesh" :position="level_position" />
     <!-- <light :obj="light" :position="building_position" /> -->
     <mesh ref="label3d" name="Label" :position="label_position">
       <geometry type="Plane" :args="[label_size.x, label_size.y]" />
@@ -11,7 +11,7 @@
         <texture :options="label_texture_opts" />
       </material>
     </mesh>
-    <div v-if="isOpened">
+    <!-- <div v-if="isOpened">
       <ContentBlock
         v-for="item in data.visibles"
         :key="item.id"
@@ -48,29 +48,36 @@
         type="concept"
         :data="item"
         />
-    </div>
+    </div> -->
   </div>
 </template>
 
 <script>
+
+import { mapInstanceState } from '@urbn/vuex-helpers'
+
 import * as THREE from 'three'
 // import { toCSG, fromCSG } from 'three-csg'
 import { ThreeBSP } from 'three-js-csg-es6'
 
 import mixins from 'components/mixins'
-import ContentBlock from 'components/objects/ContentBlock'
+
+// import ContentBlock from 'components/objects/ContentBlock'
 
 // import BgVertex from 'assets/glsl/BgVertex'
 // import BuildingFragment from 'assets/glsl/BuildingFragment'
 
+// We'll determine our module based on the moduleName prop on this component
+// https://www.npmjs.com/package/@urbn/vuex-helpers
+const getModuleName = cmp => `project:${cmp.id}`
+
 export default {
   name: 'Project',
   components: {
-    ContentBlock
+    // ContentBlock
   },
   mixins: [mixins],
-  // props: { size: Object, texture: String, position: Object, color: Number },
-  props: { data: Object, len: Number, index: Number },
+  props: { id: Number, title: String },
   data () {
     console.log('Project data() : data', this.data)
     // get size and positions from project store
@@ -265,6 +272,7 @@ export default {
     levelMesh.material = levelMat
 
     return {
+      modName: null,
       block3d: null,
       // block_opts: materialOpts,
       label3d: null,
@@ -297,6 +305,9 @@ export default {
     }
   },
   computed: {
+    ...mapInstanceState(getModuleName, {
+      storeID: state => state.id
+    }),
     label_texture_opts () {
       return {
         canvas: this.label_canvas,
@@ -308,8 +319,13 @@ export default {
   },
   created () {
     console.log('Project created: data', this, this.data)
+    console.log('Project created: getModuleName', getModuleName)
+
+    // TODO: create dynamic vuex module for each project
+    // this.modNameSpace = `project:${this.data.id}`
 
-    this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
+    // this.label_canvas = this.createLabelCanvas(this.data.Titre.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
+    this.label_canvas = this.createLabelCanvas(this.storeID.replace(/ /g, '\n').toUpperCase(), 48, 21, '#000000', '#ffffff')
     this.label_position.x = this.position.x - this.size.x / 2 + this.label_size.x / 2 + 1
     this.label_position.y = this.position.y + this.size.y / 2 - this.label_size.y / 2 - 1
     this.label_position.z = this.position.z + this.size.z / 2 + 0.5
@@ -332,10 +348,8 @@ export default {
     // console.log('project mounted', this.$env3d)
     // var light = new THREE.AmbientLight(0xbf1a1a) // soft white light
     // this.$env3d.scene.add(light)
+  },
+  methods: {
   }
-  // ,
-  // methods: {
-  //
-  // }
 }
 </script>

src/store/modules/project.js

@@ -0,0 +1,25 @@
+// https://codeburst.io/dynamic-modules-with-vuex-and-vue-b9c481ca792
+// https://www.brophy.org/post/instance-aware-vuex-modules-1/
+
+// import qs from 'querystring'
+// import { REST } from 'api/rest-axios'
+
+export default {
+  namespaced: true,
+
+  // initial state
+  state: {
+  },
+
+  // getters
+  getters: {
+  },
+
+  // mutations
+  mutations: {
+  },
+
+  // actions
+  actions: {
+  }
+}

src/store/modules/projects.js

@@ -1,6 +1,7 @@
 // import qs from 'querystring'
 // import { REST } from 'api/rest-axios'
 import { GRAPHQL } from 'api/graphql-axios'
+import projectMod from 'store/modules/project'
 
 export default {
   namespaced: true,
@@ -24,6 +25,19 @@ export default {
     setProjects (state, projects) {
       // record the retrieved data
       state.projects = projects
+      console.log('setProjects', this)
+      // register a new module only if doesn't exist
+      let name
+      projects.forEach((project, i) => {
+        name = `project:${project.id}`
+        if (!(this.state && this.state[name])) {
+          projectMod.state = { ...project }
+          this.registerModule(name, projectMod)
+        } else {
+          // re-use the already existing module
+          console.log(`reusing module poject:${project.id}`)
+        }
+      })
 
       // randomly define building sizes
       let totalW = 0
@@ -126,16 +140,16 @@ export default {
     // async get authors
     getProjects ({ dispatch, commit, state }) {
       // GRAPHQL
-      let query = `query {
-        projects {
-          id
-          Weight
-          Titre
-        }
-      }`
-      GRAPHQL.post('', { query: query })
-        .then((resp) => {
-          console.log('graphql projects', resp)
+      GRAPHQL.post('', { query: `query {
+          projects {
+            id
+            Weight
+            Titre
+          }
+        }` })
+        .then(({ data: { data: { projects } = null } }) => {
+          console.log('graphql projects', projects)
+          commit('setProjects', projects)
         })
         .catch((error) => {
           console.warn('Issue with getProjects', error)