Как исправить ошибку «app.js:11 Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispatch')»?

Question

[Hfnas]

Как исправить ошибку

Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'dispatch')

popup/app.js

import { createApp } from 'vue';
import App from './App';
import store from './store'

const popup =createApp(App);
popup.use(store);
popup.mount('#modal');

window.popup = {};
window.popup.showModal =
    (banner) =>popup.$store.dispatch('modal/showModal',"data");

showModal вызывается извне , в шаблоне твиг, при нажатии на кнопку
<button onclick="showModal">modal</button

Структура модуля такая.
/popup/App.vue

<template>
  <div class="modal fade show" tabindex="-1" role="dialog" aria-hidden="true" v-if="modalVisibility" >

    <div class="modal-dialog" role="document">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">Модальное окно</h5>

          <button class="btn-close"
                  type="button"
                  data-dismiss="modal"
                  aria-label="Close"
                  @click="closeModal">
          </button>

        </div>
        <form>
          <div class="modal-body"></div>
          <div class="modal-footer">
            <button class="btnModal submitBtn" >2</button>
            <div class="modal-text-footer"> 3</div>
          </div>
        </form>
      </div>
    </div>
  </div>
  <div class="modal-backdrop fade show" v-if="modalVisibility"></div>
</template>

<script>
import {mapState, mapActions} from "vuex";

export default {
  name: "App",
  computed: {
    ...mapState("modal",["modalVisibity", "staticStore", "bannerSlug"])
  },
  methods: {
    ...mapActions("modal", ["showModal"]),
  },
}
</script>

/popup/store/modules/modal.js

import axios from "axios";
import {StatusCodes} from "http-status-codes";
import {apiConfig, apiConfigPatch} from "../../../utils/settings";

const state = () => ({
    staticStore: {
        
    },
    modalVisibity: false,
    bannerSlug: ''
});

const getters = {


};

const actions = {
   
    showModal2({state, dispatch}){
        connsole.log("hkkhk2");
    },
    showModal({state, dispatch}, bannerSlug){
        connsole.log("hkkhk");
        state.modalVisibity=true;
        state.bannerSlug= bannerSlug;
    },
    async hideModal({state, commit}){
        state.modalVisibity=false;
        state.bannerSlug='';
    }
};

const mutations = {

};

export default {
    namespaced: true,
    state,
    getters,
    actions,
    mutations
}

/popup/store/index.js

import { createStore, createLogger } from 'vuex'
import Vue from "vue";
import modal from './modules/modal'


const debug = process.env.NODE_ENV !== 'production'

export default createStore({
    modules: {
        modal
    },
    strict: debug,
    plugins: debug ? [createLogger()] : []
})

Answer 1

[0xD34F]

const popup =createApp(App);

popup.$store.dispatch

Вы путаете экземпляр приложения и экземпляр корневого компонента. Чтобы достучаться до $store, вам нужен результат вызова mount, а не createApp.

А вообще, поскольку экземпляр хранилища у вас рядом импортирован, можно обращаться к нему напрямую - просто store.dispatch.

Comments

[Hfnas]

/popup/app.js

import { createApp } from 'vue';
import App from './App';
import store from './store'

const popup =createApp(App).use(store).mount('#modal');

window.popup = {};
window.popup.showModal =
    (banner) =>popup.$store.dispatch('modal/showModal',"data");

Cпасибо,а почемку тогда
в одну строчку

const show=createApp(App).use(store).use(VueNumberFormat, {prefix: '', suffix:  window.staticStore.currency , decimal: '.',  thousand: ' ', precision: 1});

,
не работает, а так работает.... Поэтомув я так и сделала ранее(см мой вопрос)

import { createApp } from 'vue';
import App from './App';
import store from "./store";
import VueNumberFormat from 'vue-number-format'

const show=createApp(App);
show.use(store);
show.use(VueNumberFormat, {prefix: '', suffix:  window.staticStore.currency , decimal: '.',  thousand: ' ', precision: 1});
show.mount('#app');