Mutations on Page Load [Nuxt] [Vuex]









up vote
0
down vote

favorite












(I'm new to vue and nuxt).
I currently have a <HeaderImage> component in my layouts/default.vue and would like to have each page to pass a different image url to that component.



Right now I'm using vuex $store for that purpose (but would love if there were a simpler way to pass the data), but I'm trying to figure out where in my pages/xyz.vue I should be using the mutation this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')



All of the examples I can find only use mutations on user events.










share|improve this question

























    up vote
    0
    down vote

    favorite












    (I'm new to vue and nuxt).
    I currently have a <HeaderImage> component in my layouts/default.vue and would like to have each page to pass a different image url to that component.



    Right now I'm using vuex $store for that purpose (but would love if there were a simpler way to pass the data), but I'm trying to figure out where in my pages/xyz.vue I should be using the mutation this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')



    All of the examples I can find only use mutations on user events.










    share|improve this question























      up vote
      0
      down vote

      favorite









      up vote
      0
      down vote

      favorite











      (I'm new to vue and nuxt).
      I currently have a <HeaderImage> component in my layouts/default.vue and would like to have each page to pass a different image url to that component.



      Right now I'm using vuex $store for that purpose (but would love if there were a simpler way to pass the data), but I'm trying to figure out where in my pages/xyz.vue I should be using the mutation this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')



      All of the examples I can find only use mutations on user events.










      share|improve this question













      (I'm new to vue and nuxt).
      I currently have a <HeaderImage> component in my layouts/default.vue and would like to have each page to pass a different image url to that component.



      Right now I'm using vuex $store for that purpose (but would love if there were a simpler way to pass the data), but I'm trying to figure out where in my pages/xyz.vue I should be using the mutation this.$store.commit('headerImg/setHeaderImage', 'someImage.jpg')



      All of the examples I can find only use mutations on user events.







      vuex nuxt.js






      share|improve this question













      share|improve this question











      share|improve this question




      share|improve this question










      asked Nov 11 at 1:48









      AwesomeScott

      12




      12






















          2 Answers
          2






          active

          oldest

          votes

















          up vote
          0
          down vote













          What you are trying to do probably doesn't have a particularly simple solution and how I would do it is use a store state element that is set by the component when it is loaded. The component would commit a mutation in the store that alters the state element. The layout would then use that state element through a getter to set the image url. Here is how I'd code that. In the store state i'd have an array of class names, let's call it 'headState', and an element that would be assigned one of those class names, called 'headStateSelect:



          //store/index.js

          state:
          headState: ['blue', 'red', 'green'],
          headStateSelect : ''



          In your component you can use fetch, or async fetch to commit a mutation that will set 'headStateSelect' with one of the 'headState' elements.



          //yourComponent.vue

          async fetch ( store, params )
          await store.commit('SET_HEAD', 1) //the second parameter is to specify the array position of the 'headState' class you want



          and store:



          //store/index.js

          mutations:
          SET_HEAD (state, data)
          state.headStateSelect = state.headState[data]




          In the store we should also have a getter that returns the 'headStateSelect' so our layout can easily get it.



          getters: 
          head(state)
          return state.headStateSelect




          finally, in the layout we can use the computed property to get our getter:



          //layouts/default.vue

          computed:
          headElement()
          return this.$store.getters.head




          and the layout can use the computed property to set a class like so:



          //layouts/default.vue 

          <template>
          <div :class="headElement">
          </div>
          </template>


          The div in the layout will now be set with the class name 'red' (ie. store.state.headState[1]) and you can have a .red css class in your layout file that styles it however you want, including with a background image.






          share|improve this answer




















          • This is helpful, but I think I wasn't clear about my goal. I've posted an answer that might clear up exactly what I'm asking.
            – AwesomeScott
            Nov 11 at 13:51

















          up vote
          0
          down vote













          For now I've settled on creating it like this:



          ~/store/header.js

          import Vue from 'vue'
          import Vuex from 'vuex'

          Vue.use(Vuex)

          const state = () => (
          headerImage: 'default.jpg'
          )

          const mutations =
          newHeaderImage(state, newImage)
          state.headerImage = newImage



          export default
          namespaced: true,
          state,
          mutations



          ``



          ~/layouts/default.vue

          <template>
          <div id="container">
          <Header />
          <nuxt />
          </div>
          </template>

          <script>
          import Header from '~/components/Header'

          export default
          components:
          Header


          </script>


          ``



          ~/components/Header.vue

          <template>
          <header :style=" backgroundImage: 'url(' + headerImage + ')'" class="fixed">
          <h1>Header Text</h1>
          </header>
          </template>

          <script>
          computed:
          var image = this.$store.state.header.headerImage
          return require('~/assets/img/' + image)

          </script>


          ``



          ~/pages/customHeader.vue

          <template>
          <main>
          ...
          </main>
          </template>

          <script>
          export default
          head()
          this.$store.commit('header/newHeaderImage', 'custom-header.jpg')
          return
          title: this.title



          </script>


          But something feels off about putting the mutation in head() Is that correct?



          And the next issue I am facing is how to return the header to default.jpg if a page doesn't change the state (which makes me think this is all the wrong approach).






          share|improve this answer






















            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%2f53245156%2fmutations-on-page-load-nuxt-vuex%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








            up vote
            0
            down vote













            What you are trying to do probably doesn't have a particularly simple solution and how I would do it is use a store state element that is set by the component when it is loaded. The component would commit a mutation in the store that alters the state element. The layout would then use that state element through a getter to set the image url. Here is how I'd code that. In the store state i'd have an array of class names, let's call it 'headState', and an element that would be assigned one of those class names, called 'headStateSelect:



            //store/index.js

            state:
            headState: ['blue', 'red', 'green'],
            headStateSelect : ''



            In your component you can use fetch, or async fetch to commit a mutation that will set 'headStateSelect' with one of the 'headState' elements.



            //yourComponent.vue

            async fetch ( store, params )
            await store.commit('SET_HEAD', 1) //the second parameter is to specify the array position of the 'headState' class you want



            and store:



            //store/index.js

            mutations:
            SET_HEAD (state, data)
            state.headStateSelect = state.headState[data]




            In the store we should also have a getter that returns the 'headStateSelect' so our layout can easily get it.



            getters: 
            head(state)
            return state.headStateSelect




            finally, in the layout we can use the computed property to get our getter:



            //layouts/default.vue

            computed:
            headElement()
            return this.$store.getters.head




            and the layout can use the computed property to set a class like so:



            //layouts/default.vue 

            <template>
            <div :class="headElement">
            </div>
            </template>


            The div in the layout will now be set with the class name 'red' (ie. store.state.headState[1]) and you can have a .red css class in your layout file that styles it however you want, including with a background image.






            share|improve this answer




















            • This is helpful, but I think I wasn't clear about my goal. I've posted an answer that might clear up exactly what I'm asking.
              – AwesomeScott
              Nov 11 at 13:51














            up vote
            0
            down vote













            What you are trying to do probably doesn't have a particularly simple solution and how I would do it is use a store state element that is set by the component when it is loaded. The component would commit a mutation in the store that alters the state element. The layout would then use that state element through a getter to set the image url. Here is how I'd code that. In the store state i'd have an array of class names, let's call it 'headState', and an element that would be assigned one of those class names, called 'headStateSelect:



            //store/index.js

            state:
            headState: ['blue', 'red', 'green'],
            headStateSelect : ''



            In your component you can use fetch, or async fetch to commit a mutation that will set 'headStateSelect' with one of the 'headState' elements.



            //yourComponent.vue

            async fetch ( store, params )
            await store.commit('SET_HEAD', 1) //the second parameter is to specify the array position of the 'headState' class you want



            and store:



            //store/index.js

            mutations:
            SET_HEAD (state, data)
            state.headStateSelect = state.headState[data]




            In the store we should also have a getter that returns the 'headStateSelect' so our layout can easily get it.



            getters: 
            head(state)
            return state.headStateSelect




            finally, in the layout we can use the computed property to get our getter:



            //layouts/default.vue

            computed:
            headElement()
            return this.$store.getters.head




            and the layout can use the computed property to set a class like so:



            //layouts/default.vue 

            <template>
            <div :class="headElement">
            </div>
            </template>


            The div in the layout will now be set with the class name 'red' (ie. store.state.headState[1]) and you can have a .red css class in your layout file that styles it however you want, including with a background image.






            share|improve this answer




















            • This is helpful, but I think I wasn't clear about my goal. I've posted an answer that might clear up exactly what I'm asking.
              – AwesomeScott
              Nov 11 at 13:51












            up vote
            0
            down vote










            up vote
            0
            down vote









            What you are trying to do probably doesn't have a particularly simple solution and how I would do it is use a store state element that is set by the component when it is loaded. The component would commit a mutation in the store that alters the state element. The layout would then use that state element through a getter to set the image url. Here is how I'd code that. In the store state i'd have an array of class names, let's call it 'headState', and an element that would be assigned one of those class names, called 'headStateSelect:



            //store/index.js

            state:
            headState: ['blue', 'red', 'green'],
            headStateSelect : ''



            In your component you can use fetch, or async fetch to commit a mutation that will set 'headStateSelect' with one of the 'headState' elements.



            //yourComponent.vue

            async fetch ( store, params )
            await store.commit('SET_HEAD', 1) //the second parameter is to specify the array position of the 'headState' class you want



            and store:



            //store/index.js

            mutations:
            SET_HEAD (state, data)
            state.headStateSelect = state.headState[data]




            In the store we should also have a getter that returns the 'headStateSelect' so our layout can easily get it.



            getters: 
            head(state)
            return state.headStateSelect




            finally, in the layout we can use the computed property to get our getter:



            //layouts/default.vue

            computed:
            headElement()
            return this.$store.getters.head




            and the layout can use the computed property to set a class like so:



            //layouts/default.vue 

            <template>
            <div :class="headElement">
            </div>
            </template>


            The div in the layout will now be set with the class name 'red' (ie. store.state.headState[1]) and you can have a .red css class in your layout file that styles it however you want, including with a background image.






            share|improve this answer












            What you are trying to do probably doesn't have a particularly simple solution and how I would do it is use a store state element that is set by the component when it is loaded. The component would commit a mutation in the store that alters the state element. The layout would then use that state element through a getter to set the image url. Here is how I'd code that. In the store state i'd have an array of class names, let's call it 'headState', and an element that would be assigned one of those class names, called 'headStateSelect:



            //store/index.js

            state:
            headState: ['blue', 'red', 'green'],
            headStateSelect : ''



            In your component you can use fetch, or async fetch to commit a mutation that will set 'headStateSelect' with one of the 'headState' elements.



            //yourComponent.vue

            async fetch ( store, params )
            await store.commit('SET_HEAD', 1) //the second parameter is to specify the array position of the 'headState' class you want



            and store:



            //store/index.js

            mutations:
            SET_HEAD (state, data)
            state.headStateSelect = state.headState[data]




            In the store we should also have a getter that returns the 'headStateSelect' so our layout can easily get it.



            getters: 
            head(state)
            return state.headStateSelect




            finally, in the layout we can use the computed property to get our getter:



            //layouts/default.vue

            computed:
            headElement()
            return this.$store.getters.head




            and the layout can use the computed property to set a class like so:



            //layouts/default.vue 

            <template>
            <div :class="headElement">
            </div>
            </template>


            The div in the layout will now be set with the class name 'red' (ie. store.state.headState[1]) and you can have a .red css class in your layout file that styles it however you want, including with a background image.







            share|improve this answer












            share|improve this answer



            share|improve this answer










            answered Nov 11 at 6:14









            Andrew1325

            31328




            31328











            • This is helpful, but I think I wasn't clear about my goal. I've posted an answer that might clear up exactly what I'm asking.
              – AwesomeScott
              Nov 11 at 13:51
















            • This is helpful, but I think I wasn't clear about my goal. I've posted an answer that might clear up exactly what I'm asking.
              – AwesomeScott
              Nov 11 at 13:51















            This is helpful, but I think I wasn't clear about my goal. I've posted an answer that might clear up exactly what I'm asking.
            – AwesomeScott
            Nov 11 at 13:51




            This is helpful, but I think I wasn't clear about my goal. I've posted an answer that might clear up exactly what I'm asking.
            – AwesomeScott
            Nov 11 at 13:51












            up vote
            0
            down vote













            For now I've settled on creating it like this:



            ~/store/header.js

            import Vue from 'vue'
            import Vuex from 'vuex'

            Vue.use(Vuex)

            const state = () => (
            headerImage: 'default.jpg'
            )

            const mutations =
            newHeaderImage(state, newImage)
            state.headerImage = newImage



            export default
            namespaced: true,
            state,
            mutations



            ``



            ~/layouts/default.vue

            <template>
            <div id="container">
            <Header />
            <nuxt />
            </div>
            </template>

            <script>
            import Header from '~/components/Header'

            export default
            components:
            Header


            </script>


            ``



            ~/components/Header.vue

            <template>
            <header :style=" backgroundImage: 'url(' + headerImage + ')'" class="fixed">
            <h1>Header Text</h1>
            </header>
            </template>

            <script>
            computed:
            var image = this.$store.state.header.headerImage
            return require('~/assets/img/' + image)

            </script>


            ``



            ~/pages/customHeader.vue

            <template>
            <main>
            ...
            </main>
            </template>

            <script>
            export default
            head()
            this.$store.commit('header/newHeaderImage', 'custom-header.jpg')
            return
            title: this.title



            </script>


            But something feels off about putting the mutation in head() Is that correct?



            And the next issue I am facing is how to return the header to default.jpg if a page doesn't change the state (which makes me think this is all the wrong approach).






            share|improve this answer


























              up vote
              0
              down vote













              For now I've settled on creating it like this:



              ~/store/header.js

              import Vue from 'vue'
              import Vuex from 'vuex'

              Vue.use(Vuex)

              const state = () => (
              headerImage: 'default.jpg'
              )

              const mutations =
              newHeaderImage(state, newImage)
              state.headerImage = newImage



              export default
              namespaced: true,
              state,
              mutations



              ``



              ~/layouts/default.vue

              <template>
              <div id="container">
              <Header />
              <nuxt />
              </div>
              </template>

              <script>
              import Header from '~/components/Header'

              export default
              components:
              Header


              </script>


              ``



              ~/components/Header.vue

              <template>
              <header :style=" backgroundImage: 'url(' + headerImage + ')'" class="fixed">
              <h1>Header Text</h1>
              </header>
              </template>

              <script>
              computed:
              var image = this.$store.state.header.headerImage
              return require('~/assets/img/' + image)

              </script>


              ``



              ~/pages/customHeader.vue

              <template>
              <main>
              ...
              </main>
              </template>

              <script>
              export default
              head()
              this.$store.commit('header/newHeaderImage', 'custom-header.jpg')
              return
              title: this.title



              </script>


              But something feels off about putting the mutation in head() Is that correct?



              And the next issue I am facing is how to return the header to default.jpg if a page doesn't change the state (which makes me think this is all the wrong approach).






              share|improve this answer
























                up vote
                0
                down vote










                up vote
                0
                down vote









                For now I've settled on creating it like this:



                ~/store/header.js

                import Vue from 'vue'
                import Vuex from 'vuex'

                Vue.use(Vuex)

                const state = () => (
                headerImage: 'default.jpg'
                )

                const mutations =
                newHeaderImage(state, newImage)
                state.headerImage = newImage



                export default
                namespaced: true,
                state,
                mutations



                ``



                ~/layouts/default.vue

                <template>
                <div id="container">
                <Header />
                <nuxt />
                </div>
                </template>

                <script>
                import Header from '~/components/Header'

                export default
                components:
                Header


                </script>


                ``



                ~/components/Header.vue

                <template>
                <header :style=" backgroundImage: 'url(' + headerImage + ')'" class="fixed">
                <h1>Header Text</h1>
                </header>
                </template>

                <script>
                computed:
                var image = this.$store.state.header.headerImage
                return require('~/assets/img/' + image)

                </script>


                ``



                ~/pages/customHeader.vue

                <template>
                <main>
                ...
                </main>
                </template>

                <script>
                export default
                head()
                this.$store.commit('header/newHeaderImage', 'custom-header.jpg')
                return
                title: this.title



                </script>


                But something feels off about putting the mutation in head() Is that correct?



                And the next issue I am facing is how to return the header to default.jpg if a page doesn't change the state (which makes me think this is all the wrong approach).






                share|improve this answer














                For now I've settled on creating it like this:



                ~/store/header.js

                import Vue from 'vue'
                import Vuex from 'vuex'

                Vue.use(Vuex)

                const state = () => (
                headerImage: 'default.jpg'
                )

                const mutations =
                newHeaderImage(state, newImage)
                state.headerImage = newImage



                export default
                namespaced: true,
                state,
                mutations



                ``



                ~/layouts/default.vue

                <template>
                <div id="container">
                <Header />
                <nuxt />
                </div>
                </template>

                <script>
                import Header from '~/components/Header'

                export default
                components:
                Header


                </script>


                ``



                ~/components/Header.vue

                <template>
                <header :style=" backgroundImage: 'url(' + headerImage + ')'" class="fixed">
                <h1>Header Text</h1>
                </header>
                </template>

                <script>
                computed:
                var image = this.$store.state.header.headerImage
                return require('~/assets/img/' + image)

                </script>


                ``



                ~/pages/customHeader.vue

                <template>
                <main>
                ...
                </main>
                </template>

                <script>
                export default
                head()
                this.$store.commit('header/newHeaderImage', 'custom-header.jpg')
                return
                title: this.title



                </script>


                But something feels off about putting the mutation in head() Is that correct?



                And the next issue I am facing is how to return the header to default.jpg if a page doesn't change the state (which makes me think this is all the wrong approach).







                share|improve this answer














                share|improve this answer



                share|improve this answer








                edited Nov 11 at 13:56

























                answered Nov 11 at 13:50









                AwesomeScott

                12




                12



























                    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.





                    Some of your past answers have not been well-received, and you're in danger of being blocked from answering.


                    Please pay close attention to the following guidance:


                    • 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%2f53245156%2fmutations-on-page-load-nuxt-vuex%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

                    Darth Vader #20

                    How to how show current date and time by default on contact form 7 in WordPress without taking input from user in datetimepicker

                    Ondo