Variables in App.vue

2

I have inside the App.vue file the variable CustomerName

{{nomeCliente}}

I'm creating a function inside the App.vue to populate the variable

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

which is called from within the Cadastro.vue

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

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

    
asked by anonymous 01.05.2018 / 15:47

1 answer

3
One way to do that, if in case you have a <router-view> in your App.vue, and the component that you are issuing the 'Test Client' fill event is one level below only, you can create one event that will perform the filling of the direct name, without a function:

App.vue

<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.vue

<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 event issue can be in any method, watch , etc, and not only with @submit .

Another way to do this is by using Vuex . In this case, you probably have a "client" object, where when it is filled 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, you would access anywhere in your application with this.$store.state.client or this.$store.getters.client or you can perform mapping to client and access with 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 the documentation on how to install / configure Vuex in several ways, use the one you consider the best. If it is to be used, use it together with Vue Dev Tools , a great tool for working with events / store.

    
01.05.2018 / 16:46