En Vue 2/3, y en un entorno ES6, cuando quiero acceder a una tienda Vuex en un archivo JS externo (fuera del componente), normalmente usaría algo como esto:
// example.js import { store } from '../store/index'; console.log(store.state.currentUser); Esto funciona muy bien, sin embargo, en mi entorno actual (Rails 5 sin paquete web) , no podemos usar declaraciones de import en absoluto.
Pregunta: ¿Hay alguna forma, en JavaScript ES5 normal, de acceder a las tiendas Vuex fuera de los componentes?
Vale la pena señalar que tengo una configuración exitosa de Vuex en nuestra interfaz, simplemente no podemos acceder a ella fuera de nuestros componentes definidos de Vue.
En mi configuración de Rails, tengo esto:
// app/assets/javascripts/lib/vuex/store.js const store = new Vuex.Store({ modules: { activity: activityStore, } }); // application.js //= require vue/dist/vue.min //= require vuex/dist/vuex.min.js $(document).ready(function () { Vue.use(Vuex); }); En este caso, store es solo un objeto javascript global. Úselo de la misma manera que lo haría con cualquier otro objeto JS.
Siempre que esté dentro de un archivo JS que esté compilado correctamente y su Vue base esté instalado correctamente, puede simplemente hacer store.state.activity.activities , o si tiene mutaciones, store.commit('myMutation', 'Hello test') .
Mi ejemplo específico fue una gran función que llama a un webhook. El webhook puede tardar un poco y quiero enviar mensajes al usuario a medida que recibo mensajes nuevos.
Ejemplo:
// webhook.js async webhookFunction() { // new message recieved store.commit('newActivity', 'Your object has been updated'); }