自定义组件 |初始化前无法访问 'store'

Question

我想访问自定义组件中的 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);

但是无法访问它，因为它似乎没有被初始化。

在 store.js 内部，它是：

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

export default store;

我不能在 main.js 中使用 app.use，因为它是自定义组件。我如何导入商店才能使用它？

Answer 1

请尝试：

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

如果不行，你最好检查一下Vuex guide of Composition API。

Answer 2

我几乎做对了。解决方案非常简单：

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

自定义组件 |初始化前无法访问 'store'

Custom-Component | Cannot access 'store' before initialization

vue.js

vuex