Búsqueda de sitios web

vuejs3 - P: hacer que el store de vuex esté disponible globalmente con Vue 3 y TypeScript (proyecto construido con el cli) +resuelto


¿Cómo hago que mi tienda esté disponible globalmente en Vue 3 con Vuex?

Mi tienda:

import { createStore } from 'vuex'

export default createStore({
  state: {},
  mutations: {},
  getters: {},
  actions: {},
  modules: {},
})

Mi main.ts

import yourStore from './store/yourStore'

const app = createApp(App)
app.use(yourStore)

app.config.globalProperties.$yourStore = yourStore

app.mount('#app')

Esto no funciona:

this.$yourStore.dispatch('your action')

Respuesta #1

Necesitas agregar la tienda a shims-vuex.d.ts para que esté disponible globalmente, así:

import { yourStore } from './store/yourStore' // path to store file

declare module '@vue/runtime-core' {
  interface ComponentCustomProperties {
    $yourStore: yourStore
  }
}

Ahora esto funciona

this.$yourStore.dispatch('your action')