0

Tenho uma aplicação em VueJs2, na qual tenho um app.js, aonde instâncio o Vue e faço os imports (Templates, plugins, etc). Acontece que alguns plugins/libs eu consigo utilizar normalmente dentro de componentes filho (axios, por exemplo), já outros eu preciso fazer o import/use novamente dentro do componente. Exemplo: Vuex.

Meu app.js

//Vue
import Vue from 'vue'

//Axios
import axios from 'axios'

//Vuex
import Vuex from 'vuex'
Vue.use(Vuex)

... 


//Main
new Vue({
    router,
    render: h => h(App)
}).$mount('#app')

Nesse contexto eu consigo utilizar o axios dentro dos componentes, normalmente. Sem necessidade de "re-importar" dentro do componente. Ele fica global.

Um componente qualquer (importado no meu app.js e funcionando)

<script>
import BtnAction from './../helper/BtnAction.vue';
export default {
    ...
}
</script>

No contexto acima, se eu tentar usar um Vuex, eu não consegueria. Como já mencionado, eu conseguiria (e consigo) usar o axios ou outra lib.

Dessa forma dá certo

<script>
import BtnAction from './../helper/BtnAction.vue';
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)

export default {
     ...
}
</script>

Obrigatóriamente preciso inserir o Vue, inclusive. Se eu só importar o Vuex, ele acusa erro na falta do Vue.

O Vuex é só um exemplo. Ocorre com outras libs. Estou tendo essa dificuldade e não quero re-importar os plugins/libs... a não ser que realmente esse seja o jeito certo (e gostaria de saber pq no app.js não fica global).

Obrigado

2 Respostas 2

1

Você pode passar sua store do Vuex na criação do app da mesma maneira que passa o router. Algo assim:

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

const store = Vuex.Store({
    state: {
        propriedade: 'valor'
    },
    mutations: {
        // ...
    }
});

const app = new Vue({
    store // ou store: store
}).$mount('#app');

Depois, dentro de um método de componente, você pode se referir à store assim com this.$store.

3
  • Ótima resposta! Obrigado. Commented 5/01/2018 às 16:13
  • Só uma dúvida: vc diz "dentro de um método de componente" ... eu poderia utilizar uma store fora de um método (mounted, created, etc.) ? Commented 5/01/2018 às 16:14
  • 1
    Sim, de qualquer lugar onde você possa acessar o this do componente @MarcoGarcia
    – bfavaretto
    Commented 5/01/2018 às 16:30
0

Vue.use faz o plugin se torna "parte" do Vue, passando a ser global(Acredito que seja isso que acontece). Logo oq vc "usou" var estar disponivel na propria instancia do Vue. No caso do Vuex voce pode acessar com this.$store No caso do Router voce pode acessar com this.$router

0

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .