How to share variable with Nuxt.js from layout to pages?

Question

I actually work on a project that consists of display data from Jsons on a Nuxt.js website using Vuetify. I have created a selector in my layout to choose which Json the user wants to display. I need to access this variable from all the different pages of my project.

Here is what my default.vue looks like :

<template>
  <v-overflow-btn
    :items="json_list"
    label="Select an Json to display"
    v-model="selected_json"
    editable
    mandatory
    item-value="text"
  ></v-overflow-btn>
</template>

<script>
export default {
  data() {
    return {
      selected_json: undefined,
      json_list: [
        {text: "first.json"},
        {text: "second.json"},
      ],
    }
  }
}
</script>

The variable I would like to access from all my different pages is selected_json.

I see many things on the internet such as Vuex or a solution that consist to pass the variable with the URL. But I'm kind of newby in web programming (started Vue/Nuxt one week ago) and I don't really understand how to apply this in my project. So if there is a more easy way to do it or a good explaination, I'm interested!

Thanks in advance for your help :)

Answer 1

Using Vuex we can easily achieve what you want.

First of all create a file index.js in folder store (if you don't have a store folder then create it in the same directory where your pages, plugins, layouts etc folders are). Then paste this piece of code in index.js

//store/index.js
export const state = () => ({
  selected_json: null
})

By doing this we set Vuex up. More precisely just state part of Vuex where if you don't know we store data accessible across your project.
Now we have to assign data from your default.vue to Vuex. We can achieve this by creating a mutation function through which we change state in Vuex. Add this to your index.js

//store/index.js
export const mutations = {
  setSelectedJson(state, selectedJson) {
    state.selected_json = selectedJson
  }
}

Here function setSelectedJson takes two params, state which is automatically passed in by Nuxt.js and it includes all our Vuex state data. The second parameter selected_json we pass in ourselves.

Now in your default.vue we need to add a watcher for selected_json so we can update our Vuex when selected_json gets updated.

//layouts/default.vue
export default {
  watch: {
    selected_json(newValue) {
      this.$store.commit("setSelectedJson", newValue)
    }
  }
}

We are almost done.
The last thing we need to do is to make a getter which is used to retrieve values from Vuex. A getter like this will do its job.

//store/index.js
export const getters = {
  getSelectedJson(state) {
    return state.selected_json
  }
}

That's it.
Now you can access selected_json on any page you want by simply getting it from Vuex with this line of code.

this.$store.getters["getSelectedJson"]