Updated CodeSnippet to properly display changes in state and action. Refactored the CodeSnippet generation to use the more proper componentmap[activecomponent] rather than activecomponentobj which has some issues. Added a mount and watch with a DRY method to invoke the CodeSnippet generation on any change to the state that needs to be reflected in the snippet.

Author: MrBeeAreWhy

src/components/dashboard_items/CodeSnippet.vue

@@ -35,7 +35,7 @@ import "prismjs/themes/prism-tomorrow.css"; // import syntax highlighting styles
 export default {
   data() {
     return {
-      // code: `Your component boilerplate will be displayed here.`,
+      code: `Your component boilerplate will be displayed here.`,
       lineNumbers: true,
       height: null,
     };
@@ -46,18 +46,18 @@ export default {
   computed: {
     // needs access to current component aka activeComponent
     ...mapState(["componentMap", "activeComponent", "activeComponentObj", "exportAsTypescript"]),
-    code: function () {
-      let computedCode = "Your component boilerplate will be displayed here.";
-      if (this.activeComponent) {
-        computedCode = this.createCodeSnippet(
+  },
+  methods: {
+    snippetInvoke(){
+      if (this.activeComponent !== ''){
+        this.code = this.createCodeSnippet(
           this.componentMap[this.activeComponent].componentName,
           this.componentMap[this.activeComponent].children
-        );
+        )
+        } else {
+          this.code = 'Your component boilerplate will be displayed here.'
       }
-      return computedCode;
     },
-  },
-  methods: {
     highlighter(myCode) {
       return highlight(myCode, languages.js);
     },
@@ -161,16 +161,16 @@ export default {
       // add import mapstate and mapactions if they exist
       let imports = "";
       if (
-        this.activeComponentObj.actions.length ||
-        this.activeComponentObj.state.length
+        this.componentMap[this.activeComponent].actions.length ||
+        this.componentMap[this.activeComponent].state.length
       ) {
         imports += "import { ";
         if (
-          this.activeComponentObj.actions.length &&
-          this.activeComponentObj.state.length
+          this.componentMap[this.activeComponent].actions.length &&
+          this.componentMap[this.activeComponent].state.length
         ) {
           imports += "mapState, mapActions";
-        } else if (this.activeComponentObj.state.length) imports += "mapState";
+        } else if (this.componentMap[this.activeComponent].state.length) imports += "mapState";
         else imports += "mapActions";
         imports += ' } from "vuex";\n';
       }
@@ -193,9 +193,9 @@ export default {
 
       // if true add data section and populate with props
       let data = "";
-      if (this.activeComponentObj.props.length) {
+      if (this.componentMap[this.activeComponent].props.length) {
         data += "  data () {\n    return {";
-        this.activeComponentObj.props.forEach((prop) => {
+        this.componentMap[this.activeComponent].props.forEach((prop) => {
           data += `\n      ${prop}: "PLACEHOLDER FOR VALUE",`;
         });
         data += "\n";
@@ -205,10 +205,10 @@ export default {
 
       // if true add computed section and populate with state
       let computed = "";
-      if (this.activeComponentObj.state.length) {
+      if (this.componentMap[this.activeComponent].state.length) {
         computed += "  computed: {";
         computed += "\n    ...mapState([";
-        this.activeComponentObj.state.forEach((state) => {
+        this.componentMap[this.activeComponent].state.forEach((state) => {
           computed += `\n      "${state}",`;
         });
         computed += "\n    ]),\n";
@@ -217,10 +217,10 @@ export default {
 
       // if true add methods section and populate with actions
       let methods = "";
-      if (this.activeComponentObj.actions.length) {
+      if (this.componentMap[this.activeComponent].actions.length) {
         methods += "  methods: {";
         methods += "\n    ...mapActions([";
-        this.activeComponentObj.actions.forEach((action) => {
+        this.componentMap[this.activeComponent].actions.forEach((action) => {
           methods += `\n      "${action}",`;
         });
         methods += "\n    ]),\n";
@@ -260,29 +260,25 @@ export default {
     },
   },
   watch: {
-    // // watches activeComponentObj for changes to make it reactive upon mutation
-    // activeComponentObj: {
-    //   handler () {
-    //     // console.log(this.activeComponentObj.children)
-    //     this.code = this.createCodeSnippet(
-    //       this.activeComponentObj.componentName,
-    //       this.activeComponentObj.children
-    //     )
-    //   }
-    // },
-    // // // // watches componentMap for changes to make it reactive upon mutation
-    // componentMap: {
-    //   handler () {
-    //     this.code = this.createCodeSnippet(
-    //       this.activeComponentObj.componentName,
-    //       this.activeComponentObj.children
-    //     )
-    //   }
-    // }
+    // watches activeComponentObj for changes to make it reactive upon mutation
+    // // // watches componentMap for changes to make it reactive upon mutation
+    activeComponent: {
+      handler () {
+        this.snippetInvoke();
+      },
+      deep: true
+    },
+    componentMap: {
+      handler () {
+        this.snippetInvoke();
+      },
+      deep: true
+    }
   },
   mounted() {
     // https://vuejs.org/v2/api/#Vue-nextTick
     // kinda like a promise, used for the window resize
+    this.snippetInvoke()
     this.$nextTick(() => {
       window.addEventListener("resize", this.getWindowHeight);
 

src/store/mutations.js

@@ -238,6 +238,7 @@ const mutations = {
     temp.state = newArray;
     state.activeComponentObj = null;
     state.activeComponentObj = temp;
+    console.log(state.componentMap)
   },
 
   [types.DELETE_USER_STATE]: (state, payload) => {
@@ -246,14 +247,8 @@ const mutations = {
       // first don't go through if component is App or Homeview
       if (component === "App" || component === "HomeView") continue;
       // splice out if there is a match
-      const newState = state.componentMap[component].state;
-      const index = newState.indexOf(payload);
-      if (index > -1) {
-        newState.splice(index, 1);
-        state.componentMap[component].state = newState;
-      } else {
-        continue;
-      }
+      state.componentMap[component].state = state.componentMap[component].state.filter(
+        (action) => action !== payload)
     }
     // remove from userState
     let index = state.userState.indexOf(payload);
@@ -265,14 +260,8 @@ const mutations = {
       // first don't go through if component is App or Homeview
       if (component === "App" || component === "HomeView") continue;
       // splice out if there is a match
-      const newActions = state.componentMap[component].actions;
-      const index = newActions.indexOf(payload);
-      if (index > -1) {
-        newActions.splice(index, 1);
-        state.componentMap[component].actions = newActions;
-      } else {
-        continue;
-      }
+      state.componentMap[component].actions = state.componentMap[component].actions.filter(
+        (action) => action !== payload)
     }
     let index = state.userActions.indexOf(payload);
     state.userActions.splice(index, 1);