Vue.js/Veux: Calling getter vs Accessing state value directly on create lifecycle hook












1















I'm using the created lifecycle hook in vue.js to load data from my store to the data for a vue component. I noticed that this.selectedType = store.state.selectedType successfully loads the data from the store. However, if I use the getter to load from the store (i.e. this.selectedType = store.getters.getType()), I get the following error:



Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"



I don't understand why it is saying that selectedType is undefined because selectedType has the value "Item" in the store and is correctly loaded on create if I use this.selectedType = store.state.selectedType.



The getter is defined as such:



getters: {
getSelectedType: state => {
return state.selectedType
}
}


And the state is defined as:



state: {
selectedType: "Item"
}


Could someone please explain why this occurs? I'm hunch is that there is something about the lifecycles that I don't fully understand that is leading to this confusion.



Thanks!










share|improve this question



























    1















    I'm using the created lifecycle hook in vue.js to load data from my store to the data for a vue component. I noticed that this.selectedType = store.state.selectedType successfully loads the data from the store. However, if I use the getter to load from the store (i.e. this.selectedType = store.getters.getType()), I get the following error:



    Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"



    I don't understand why it is saying that selectedType is undefined because selectedType has the value "Item" in the store and is correctly loaded on create if I use this.selectedType = store.state.selectedType.



    The getter is defined as such:



    getters: {
    getSelectedType: state => {
    return state.selectedType
    }
    }


    And the state is defined as:



    state: {
    selectedType: "Item"
    }


    Could someone please explain why this occurs? I'm hunch is that there is something about the lifecycles that I don't fully understand that is leading to this confusion.



    Thanks!










    share|improve this question

























      1












      1








      1








      I'm using the created lifecycle hook in vue.js to load data from my store to the data for a vue component. I noticed that this.selectedType = store.state.selectedType successfully loads the data from the store. However, if I use the getter to load from the store (i.e. this.selectedType = store.getters.getType()), I get the following error:



      Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"



      I don't understand why it is saying that selectedType is undefined because selectedType has the value "Item" in the store and is correctly loaded on create if I use this.selectedType = store.state.selectedType.



      The getter is defined as such:



      getters: {
      getSelectedType: state => {
      return state.selectedType
      }
      }


      And the state is defined as:



      state: {
      selectedType: "Item"
      }


      Could someone please explain why this occurs? I'm hunch is that there is something about the lifecycles that I don't fully understand that is leading to this confusion.



      Thanks!










      share|improve this question














      I'm using the created lifecycle hook in vue.js to load data from my store to the data for a vue component. I noticed that this.selectedType = store.state.selectedType successfully loads the data from the store. However, if I use the getter to load from the store (i.e. this.selectedType = store.getters.getType()), I get the following error:



      Error in created hook: "TypeError: Cannot read property 'selectedType' of undefined"



      I don't understand why it is saying that selectedType is undefined because selectedType has the value "Item" in the store and is correctly loaded on create if I use this.selectedType = store.state.selectedType.



      The getter is defined as such:



      getters: {
      getSelectedType: state => {
      return state.selectedType
      }
      }


      And the state is defined as:



      state: {
      selectedType: "Item"
      }


      Could someone please explain why this occurs? I'm hunch is that there is something about the lifecycles that I don't fully understand that is leading to this confusion.



      Thanks!







      javascript vue.js vuex






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 23 '18 at 7:42









      user10694376user10694376

      61




      61
























          2 Answers
          2






          active

          oldest

          votes


















          1














          You are not supposed to call getters. Just like computed properties, you instead write it like you are reading a variable. In the background the function you defined in the Vuex store is called with the state, getters (and possibly rootState and rootGetters) and returns some value.



          Beside that, it is usually an anti-pattern to use a lifecycle hook to initialise any variable. Local 'component' variables can be initialised in the data property of the component, while things like the vuex state usually end up in a computed property.



          The last thing I want to point out is that, if you have correctly added the store to your Vue application, you can access the store in any component with this.$store. To use getters in your application, you can use the mapGetters helper to map getters to component properties. I would recommend using something like this:



          import { mapGetters } from 'vuex';

          export default {
          // Omitted some things here

          computed: {
          ...mapGetters({
          selectedType: 'getSelectedType'
          })
          },

          methods: {
          doSomething () {
          console.log(this.selectedType);
          }
          }
          }


          Which is functionally equivalent to:



          computed: {
          selectedType () {
          return this.$store.getters.getSelectedType;
          }
          }





          share|improve this answer































            0














            i think its because your not supposed to mutate your data on the created() lifecyclehook. try doing that on beforeMount() or mounted()



            https://vuejs.org/v2/guide/instance.html






            share|improve this answer
























            • Maybe my hunch about the lifecycle hooks is wrong. I tried replacing the created hook with beforeMount and mounted, and neither fixed the issue. Both lifecycle hooks produced the same error as when I used created

              – user10694376
              Nov 23 '18 at 8:50











            Your Answer






            StackExchange.ifUsing("editor", function () {
            StackExchange.using("externalEditor", function () {
            StackExchange.using("snippets", function () {
            StackExchange.snippets.init();
            });
            });
            }, "code-snippets");

            StackExchange.ready(function() {
            var channelOptions = {
            tags: "".split(" "),
            id: "1"
            };
            initTagRenderer("".split(" "), "".split(" "), channelOptions);

            StackExchange.using("externalEditor", function() {
            // Have to fire editor after snippets, if snippets enabled
            if (StackExchange.settings.snippets.snippetsEnabled) {
            StackExchange.using("snippets", function() {
            createEditor();
            });
            }
            else {
            createEditor();
            }
            });

            function createEditor() {
            StackExchange.prepareEditor({
            heartbeatType: 'answer',
            autoActivateHeartbeat: false,
            convertImagesToLinks: true,
            noModals: true,
            showLowRepImageUploadWarning: true,
            reputationToPostImages: 10,
            bindNavPrevention: true,
            postfix: "",
            imageUploader: {
            brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
            contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
            allowUrls: true
            },
            onDemand: true,
            discardSelector: ".discard-answer"
            ,immediatelyShowMarkdownHelp:true
            });


            }
            });














            draft saved

            draft discarded


















            StackExchange.ready(
            function () {
            StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442505%2fvue-js-veux-calling-getter-vs-accessing-state-value-directly-on-create-lifecycl%23new-answer', 'question_page');
            }
            );

            Post as a guest















            Required, but never shown

























            2 Answers
            2






            active

            oldest

            votes








            2 Answers
            2






            active

            oldest

            votes









            active

            oldest

            votes






            active

            oldest

            votes









            1














            You are not supposed to call getters. Just like computed properties, you instead write it like you are reading a variable. In the background the function you defined in the Vuex store is called with the state, getters (and possibly rootState and rootGetters) and returns some value.



            Beside that, it is usually an anti-pattern to use a lifecycle hook to initialise any variable. Local 'component' variables can be initialised in the data property of the component, while things like the vuex state usually end up in a computed property.



            The last thing I want to point out is that, if you have correctly added the store to your Vue application, you can access the store in any component with this.$store. To use getters in your application, you can use the mapGetters helper to map getters to component properties. I would recommend using something like this:



            import { mapGetters } from 'vuex';

            export default {
            // Omitted some things here

            computed: {
            ...mapGetters({
            selectedType: 'getSelectedType'
            })
            },

            methods: {
            doSomething () {
            console.log(this.selectedType);
            }
            }
            }


            Which is functionally equivalent to:



            computed: {
            selectedType () {
            return this.$store.getters.getSelectedType;
            }
            }





            share|improve this answer




























              1














              You are not supposed to call getters. Just like computed properties, you instead write it like you are reading a variable. In the background the function you defined in the Vuex store is called with the state, getters (and possibly rootState and rootGetters) and returns some value.



              Beside that, it is usually an anti-pattern to use a lifecycle hook to initialise any variable. Local 'component' variables can be initialised in the data property of the component, while things like the vuex state usually end up in a computed property.



              The last thing I want to point out is that, if you have correctly added the store to your Vue application, you can access the store in any component with this.$store. To use getters in your application, you can use the mapGetters helper to map getters to component properties. I would recommend using something like this:



              import { mapGetters } from 'vuex';

              export default {
              // Omitted some things here

              computed: {
              ...mapGetters({
              selectedType: 'getSelectedType'
              })
              },

              methods: {
              doSomething () {
              console.log(this.selectedType);
              }
              }
              }


              Which is functionally equivalent to:



              computed: {
              selectedType () {
              return this.$store.getters.getSelectedType;
              }
              }





              share|improve this answer


























                1












                1








                1







                You are not supposed to call getters. Just like computed properties, you instead write it like you are reading a variable. In the background the function you defined in the Vuex store is called with the state, getters (and possibly rootState and rootGetters) and returns some value.



                Beside that, it is usually an anti-pattern to use a lifecycle hook to initialise any variable. Local 'component' variables can be initialised in the data property of the component, while things like the vuex state usually end up in a computed property.



                The last thing I want to point out is that, if you have correctly added the store to your Vue application, you can access the store in any component with this.$store. To use getters in your application, you can use the mapGetters helper to map getters to component properties. I would recommend using something like this:



                import { mapGetters } from 'vuex';

                export default {
                // Omitted some things here

                computed: {
                ...mapGetters({
                selectedType: 'getSelectedType'
                })
                },

                methods: {
                doSomething () {
                console.log(this.selectedType);
                }
                }
                }


                Which is functionally equivalent to:



                computed: {
                selectedType () {
                return this.$store.getters.getSelectedType;
                }
                }





                share|improve this answer













                You are not supposed to call getters. Just like computed properties, you instead write it like you are reading a variable. In the background the function you defined in the Vuex store is called with the state, getters (and possibly rootState and rootGetters) and returns some value.



                Beside that, it is usually an anti-pattern to use a lifecycle hook to initialise any variable. Local 'component' variables can be initialised in the data property of the component, while things like the vuex state usually end up in a computed property.



                The last thing I want to point out is that, if you have correctly added the store to your Vue application, you can access the store in any component with this.$store. To use getters in your application, you can use the mapGetters helper to map getters to component properties. I would recommend using something like this:



                import { mapGetters } from 'vuex';

                export default {
                // Omitted some things here

                computed: {
                ...mapGetters({
                selectedType: 'getSelectedType'
                })
                },

                methods: {
                doSomething () {
                console.log(this.selectedType);
                }
                }
                }


                Which is functionally equivalent to:



                computed: {
                selectedType () {
                return this.$store.getters.getSelectedType;
                }
                }






                share|improve this answer












                share|improve this answer



                share|improve this answer










                answered Nov 23 '18 at 8:16









                Sumurai8Sumurai8

                13.1k83261




                13.1k83261

























                    0














                    i think its because your not supposed to mutate your data on the created() lifecyclehook. try doing that on beforeMount() or mounted()



                    https://vuejs.org/v2/guide/instance.html






                    share|improve this answer
























                    • Maybe my hunch about the lifecycle hooks is wrong. I tried replacing the created hook with beforeMount and mounted, and neither fixed the issue. Both lifecycle hooks produced the same error as when I used created

                      – user10694376
                      Nov 23 '18 at 8:50
















                    0














                    i think its because your not supposed to mutate your data on the created() lifecyclehook. try doing that on beforeMount() or mounted()



                    https://vuejs.org/v2/guide/instance.html






                    share|improve this answer
























                    • Maybe my hunch about the lifecycle hooks is wrong. I tried replacing the created hook with beforeMount and mounted, and neither fixed the issue. Both lifecycle hooks produced the same error as when I used created

                      – user10694376
                      Nov 23 '18 at 8:50














                    0












                    0








                    0







                    i think its because your not supposed to mutate your data on the created() lifecyclehook. try doing that on beforeMount() or mounted()



                    https://vuejs.org/v2/guide/instance.html






                    share|improve this answer













                    i think its because your not supposed to mutate your data on the created() lifecyclehook. try doing that on beforeMount() or mounted()



                    https://vuejs.org/v2/guide/instance.html







                    share|improve this answer












                    share|improve this answer



                    share|improve this answer










                    answered Nov 23 '18 at 8:19









                    EfratEfrat

                    37729




                    37729













                    • Maybe my hunch about the lifecycle hooks is wrong. I tried replacing the created hook with beforeMount and mounted, and neither fixed the issue. Both lifecycle hooks produced the same error as when I used created

                      – user10694376
                      Nov 23 '18 at 8:50



















                    • Maybe my hunch about the lifecycle hooks is wrong. I tried replacing the created hook with beforeMount and mounted, and neither fixed the issue. Both lifecycle hooks produced the same error as when I used created

                      – user10694376
                      Nov 23 '18 at 8:50

















                    Maybe my hunch about the lifecycle hooks is wrong. I tried replacing the created hook with beforeMount and mounted, and neither fixed the issue. Both lifecycle hooks produced the same error as when I used created

                    – user10694376
                    Nov 23 '18 at 8:50





                    Maybe my hunch about the lifecycle hooks is wrong. I tried replacing the created hook with beforeMount and mounted, and neither fixed the issue. Both lifecycle hooks produced the same error as when I used created

                    – user10694376
                    Nov 23 '18 at 8:50


















                    draft saved

                    draft discarded




















































                    Thanks for contributing an answer to Stack Overflow!


                    • Please be sure to answer the question. Provide details and share your research!

                    But avoid



                    • Asking for help, clarification, or responding to other answers.

                    • Making statements based on opinion; back them up with references or personal experience.


                    To learn more, see our tips on writing great answers.




                    draft saved


                    draft discarded














                    StackExchange.ready(
                    function () {
                    StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53442505%2fvue-js-veux-calling-getter-vs-accessing-state-value-directly-on-create-lifecycl%23new-answer', 'question_page');
                    }
                    );

                    Post as a guest















                    Required, but never shown





















































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown

































                    Required, but never shown














                    Required, but never shown












                    Required, but never shown







                    Required, but never shown







                    Popular posts from this blog

                    404 Error Contact Form 7 ajax form submitting

                    How to know if a Active Directory user can login interactively

                    TypeError: fit_transform() missing 1 required positional argument: 'X'