Variables in App.Vue

Question

I have inside the App file.See the client name variable

{{nomeCliente}}

I’m creating a Function within the.Ve App to fill in the variable

this.$eventHub.$on('mostrarNome', function(value) {
    this.nomeCliente = value;
});

which is called from inside the.Vue Registry

this.$eventHub.$emit('mostrarNome', 'Teste Cliente') 

My question is whether there is another way to fill this variable without the need to create a function.

Answer 1

A way to do, if in case you own a <router-view> in your App.Vue, and the component you are sending the 'Client Test' fill-in event is one level down only, you can create an event that will perform the direct name fill without a function:

App.

<template>
  <div id="app">
    <p>--{{ nomeCliente }}--</p>
    <router-view @mostrarNome="nomeCliente = $event"/>
  </div>
</template>

<script>
export default {
  name: 'App',
  data: () => ({
    nomeCliente: 'Meu nome'
  })
}
</script>

Helloworld.Ve

<template>
  <div class="formup">
    <h1>Componente interno</h1>
    <form class="createform" @submit.prevent="evento">
      <button type="submit" class="btn btn-primary btn-block btn-large">
        Enviar
      </button>
    </form>
  </div>
</template>

<script>
export default {
  name: 'Stackoverflow',
  methods: {
    evento () {
      this.$emit('mostrarNome', 'Teste Cliente')
    }
  }
}
</script>

Detail that the issue of the event can be in any method, watch, etc, and not just with the @submit.

Another way to do it is by using the Vuex. In this case, you probably have a "customer" object, where when filling it you would store it in a Store and its status would be uniform throughout the application. A simple example of a Clientstore would be:

Clientstore.js

import Vue from '@/bootstrap'

// state
const state = {
  client: {}
}

// getters
const getters = {
  client: state => state.client
}

// actions
const actions = {
  getClient: ({ commit, state }) => {
    return Vue.http
      .get('clients/1') // mudaria a requisição para a que você precisa
      .then(({ data }) => commit('setClientData', data))
  }
}

// mutations
const mutations = {
  setClientData (state, data) {
    state.client = data
  }
}

export default {
  state,
  getters,
  actions,
  mutations
}

So, with the data in the Store filled in, you would access any location of your application with the this.$store.state.client or this.$store.getters.client or you can perform the client mapping and access with the this.client:

App2.Vue

<template>
  <div id="app">
    <button type="button" @click="test">Test</button>
    <router-view/>
  </div>
</template>

<script>
import { mapState } from 'vuex'

export default {
  name: 'App',
  computed: mapState({
    client: state => state.ClientStore.client
  }),
  methods: {
    test () {
      console.log(this.client)
    }
  }
}
</script>

Check out more in the documentation on how to install/configure Vuex, there are several ways, use the one you consider best. If using, use next to Vue Dev Tools, an excellent tool to work with events/store.