How transfer a selected option to another page in vue application?

Question

On the first page of my Vue application, I have a drop-down menu that contains a list of mailboxes.

I would like to save the value/text of the selection and use it as a parameter or variable on the Inbox page that I routed to.

Here is the drop-down code using v-autocomplete:

<v-autocomplete dense
  filled
  label="Choose Mailbox"
  v-model="mailboxes"
  :items="mailboxes"
  item-text='mailbox'
  item-value='mailbox'>
</v-autocomplete>

Here is the button as v-btn that routes to the Inbox page.

<v-btn rounded color="primary" 
  @click="$router.push('Inbox')">
Load Mailbox</v-btn>

How do I save the selected mailbox value to use on the routed-to Inbox page?

Answer 1

I suggest you to get started with Vuex :)

It's a library that share a reactive data object across the whole app.

Here is what it could look like for you:

// /store/index.js

export state: () => {
   mailbox: '',
}

export mutation: () => {
   SET_MAILBOX(state, mailbox) {
      state.mailbox = mailbox
   }
}

// your-page.vue
<template>
    <v-autocomplete
        v-model="mailboxes"
        dense
        filled
        label="Choose Mailbox"
        :items="mailboxes"
        item-text='mailbox'
        item-value='mailbox'>
      </v-autocomplete>
</template>

<script>
export default {
   computed: {
      mailboxes: {
         get() {
            this.$store.state.mailbox // Get the value from the Vuex store
         },
         set(newMailbox) {
            this.$store.commit('SET_MAILBOX', newMailbox) // Update the Vuex store
         },
      }
   }
}
</script>