javascript - Datos globales con VueJs 2

vue.js vuejs2

Question

Soy relativamente nuevo con VueJS, y no tengo idea de cómo hacer que algunos datos estén disponibles globalmente. Me gustaría guardar datos como puntos finales de API, datos de usuario y algunos otros datos que se recuperan de la API en algún lugar donde cada componente pueda acceder a estos datos.
Sé que puedo guardar esto solo con Javascript de vainilla, pero supongo que hay una manera de hacerlo con VueJS. Es posible que pueda utilizar el sistema de bus de eventos para obtener los datos, pero no sé cómo puedo implementar este sistema según mis necesidades.

Le agradecería si alguien me puede ayudar con esto.

Answer 1

Hacer un objeto de datos global

const shared = {
api: "http://localhost/myApi",
mySharedMethod(){
//do shared stuff
}
}

Si necesita exponerlo en su Vue, puede hacerlo.

new Vue({
data:{
shared
}
})

Si no lo hace, aún puede acceder a él dentro de sus Vues o componentes si lo ha importado o si están definidos en la misma página.

Es realmente tan simple como eso. Puede pasar compartido como una propiedad si lo necesita, o acceder a él globalmente.

Cuando recién está comenzando, no hay necesidad real de complicarse . A menudo se recomienda Vuex, pero también es excesivo para proyectos pequeños. Si, más tarde, encuentra que lo necesita, no es tan difícil agregarlo. También es realmente para la administración del estado y parece que realmente desea tener acceso a algunos datos globales.

Si quieres ponerte elegante, hazlo un complemento.

const shared = {
message: "my global message"
}
shared.install = function(){
Object.defineProperty(Vue.prototype, ''$myGlobalStuff'', {
get () { return shared }
})
}
Vue.use(shared);
Vue.component("my-fancy-component",{
template: "<div>My Fancy Stuff: {{$myGlobalStuff.message}}</div>"
})
new Vue({
el: "#app"
})

Ahora, cada Vue que creas y cada componente tiene acceso a él. Aquí hay un example .

Answer 2

Solo uso un archivo environment.js para almacenar todos mis puntos finales como propiedades de objeto.

var urls = {};
urls.getStudent = "api/getStudent/{id}";
etc...

Luego puse referencia a este archivo environment.js en el encabezado del documento en las páginas donde tengo código VueJS que necesita acceso a esos puntos finales. Estoy seguro de que hay muchas maneras de hacer esto.