定制组件 |初始化前无法访问'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);

但无法访问它，因为它似乎未初始化。

在商店内部.js，tho:

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

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

Answer 1

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

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

Answer 2

请尝试：

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指南的组成API。