CODEWITHSUNDEEP
vue.jsvue-componentvuexnuxt.js
Eric
Eric

Reputation: 401

Nuxt send data between 2 components

welcome to this topic. i recently tried to use the Nuxt framework to make my web-application but i ran into a problem.

In my default layout i have two components. a header component and a sidebar component. if i click on the hamburger icon in the header component the sidebar needs to get smaller or bigger depending on the hamburger icon state (true or false)

so to make it more complicated i don't want to use a prop to send it through the other component. i want to make it as a template so people can use it easy. can i transform a local component variable to a global variable other components can use?

so the code i have now is like this:

this is the index page

this is the header component

this is the sidebar component

as you can see i trigger the hamburgerstate on the header component page. i want to access that state in the sidebarcomponent to so i can adjust the sidebar

the one thing that's IMPORTANT is that it needs to be as simple as possible so people who use this template later don't have to add unnecessary work

any possibilities this can work?

Upvotes: 2

Views: 3843

Answers (1)

Andrew1325
Andrew1325

Reputation: 3579

The simplest way to achieve a global variable is to set it as a state element and have a mutation for changing it. As your 'hambuger' is a boolean there is no need to pass parameters to the mutation making it all the easier.

You may want to have a named module in you store to handle this but I'll just put it in store/index.js for now.

export const state = () => ({
  hamburger: true
})

export const mutations = {
  changeHamburger (state) {
    state.hamburger = !state.hamburger
  }
}

Then in any page or component you can access that state element:

Component.vue

<script>
import { mapMutations } from 'vuex'

export default {
  computed: {
    hamburger () {
      return this.$store.state.hamburger
    }
  },
  methods: {
    ...mapMutations({
      hamburgerChange: 'changeHamburger'
    })
  }
}
</script>

So this means you can now use the computed property 'hamburger' in your component and can change it by calling 'hamburgerChange', eg <v-btn @click="hamburgerChange">.

Upvotes: 1

Related Questions