En Vue 2, solía importar Vue y acceder a propiedades globales como esta (desde la tienda):
import Vue from 'vue' Vue.config.myGlobalProperty Según la nueva documentación , en Vue 3 las propiedades globales se declaran utilizando el objeto de app devuelto por createApp :
const app = createApp({}) app.config.globalProperties.myGlobalProperty Y luego acceda al componente secundario simplemente llamando a this.myglobalProperty
Pero, ¿cómo acceder a esa propiedad global desde la tienda? Intenté exportar/importar el objeto de la aplicación pero no funciona (probablemente debido a que la aplicación se creó después de su importación en la tienda).
Con Vue 2 solía usar propiedades globales en la tienda de esta manera:
Declaración en el archivo main.js :
import Vue from 'vue' Vue.config.myglobalProperty = 'value'Uso en la tienda:
import Vue from 'vue' Vue.config.myglobalProperty¿Hay una buena manera de hacer eso en Vue3?
Noté una mejor manera de proporcionar/inyectar propiedades , pero funciona solo con el componente secundario y no con la tienda.
Puede pasar la instancia de la app a una fábrica de tiendas :
// store.js import { createStore as createVuexStore } from 'vuex' export const createStore = (app) => { return createVuexStore({ actions: { doSomething() { if (app.config.globalProperties.myGlobal) { //... } } } }) } Y úsalo en main.js así:
// main.js import { createApp } from 'vue' import { createStore } from './store' const app = createApp({}) const store = createStore(app) app.use(store) app.mount('#app') Si los módulos de su tienda necesitan acceso a la instancia de la app , puede usar la misma técnica anterior con una fábrica de módulos :
// moduleA.js export default (app) => { return { namespaced: true, actions: { doSomething() { if (app.config.globalProperties.myOtherGlobal) { //... } } } } }E impórtalo a tu tienda así:
// store.js import moduleA from './moduleA' import { createStore as createVuexStore } from 'vuex' export const createStore = (app) => { return createVuexStore({ modules: { moduleA: moduleA(app), } }) }Si no usa Vuex, etc., puede crear fácilmente su tienda a través de proporcionar/inyectar en la propia aplicación, como en el ejemplo (el ejemplo está simplificado para su comprensión):
const createState = () => reactive({counter: 0, anyVariable: 1}); const state = createState(); const key = 'myState'; // example of reactivity outside a component setInterval(() => { state.counter++; }, 1000); const app = createApp({}); app.provide('myState', state); // provide is used on the whole applicationComo puede ver, su propia tienda se puede usar completamente fuera del componente.
Dentro de los componentes, puede usar (ejemplo):
setup() { ... const globalState = inject('myStore'); // reactive => {counter: 0, anyVariable: 1} ... return {globalState, ...} }En consecuencia, puede tener múltiples tiendas en múltiples aplicaciones Vue.
Espero que este ejemplo te ayude de alguna manera.