Custom-Component | Cannot access 'store' before initialization-CodePudding

I want to access the vuex store inside my custom-component. I create the component like:

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

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

And import the store like:

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);

But can't access it cause it seems not to be initialized.

Insite the store.js it is, tho:

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

export default store;

I can't use app.use inside main.js cause it's a custom component. How would I import the store to be able to use it?

CodePudding user response：

I nearly got it right. The solution was as simple as it could've been:

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

CodePudding user response：

Please try:

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);

And if it dosen't work, you'd better check Vuex guide of Composition API.