사용자 지정 구성 요소 | 초기화 전에 '스토어'에 액세스할 수 없습니다.

사용자 지정 구성 요소 | 초기화 전에 '스토어'에 액세스할 수 없습니다.

사용자 지정 구성 요소 내의 vuex 저장소에 액세스하려고 합니다.다음과 같은 구성 요소를 만듭니다.

import {
    defineCustomElement
} from 'vue';
import expensemain from '~/components/expense_editor/Main.ce.vue';

const CustomElement = defineCustomElement(expensemain);
window.customElements.define('expense-custom', CustomElement);

스토어를 다음과 같이 가져옵니다.

import store from "../../store/store.js";

export default {
    props: {
        data: JSON,
        expense_voucher_data: JSON
    },
    setup(props) {
        let store = store.state.expense;
        console.log(store);

그러나 초기화되지 않은 것 같아서 액세스할 수 없습니다.

가게 안에 있어요.js 그것은, tho:

const store = createStore({
    modules: {
        signup,
        expense
    }
});

export default store;

사용할 수 없습니다.app.use사용자 지정 구성 요소이기 때문에 main.js 내부.매장을 사용하려면 어떻게 수입해야 합니까?

거의 맞출 뻔 했어요.솔루션은 다음과 같이 단순했습니다.

import store from "../../store/store.js";    // import created store

export default {
    props: {
        data: JSON,
        expense_voucher_data: JSON
    },
    setup(props) {
       store.state.moduleName  // direct access to module state
       store.getters           // getters
       store.dispatch          // actions
       store.commit            // mutations

시도해 보십시오.

import store from "../../store/store.js";
import { useStore } from 'vuex'

export default {
    props: {
        data: JSON,
        expense_voucher_data: JSON
    },
    setup(props) {
        // let store = store.state.expense;
        const store = useStore();
        console.log(store);

그리고 작동하지 않으면 컴포지션 API의 Vuex 가이드를 확인하는 것이 좋습니다.

언급URL : https://stackoverflow.com/questions/71233211/custom-component-cannot-access-store-before-initialization