Vuex访问存储中的模块状态

Question

我有一个Vuex存储，它被拆分为多个模块。每个模块都有自己的状态。

我似乎无法实现这一点——我总是收到一个错误，说明Uncaught (in promise) TypeError: Cannot read property 'state' of undefined。我不知道我做错了什么。

这是我的Vue商店的index.js:

import { createStore } from 'vuex';
import layers from './modules/layers';
export const store = createStore({
modules: {
layers,
},
});

这是我试图访问的模块：

export default {
namespaced: true,
state: {
areas: [],
},
mutations: {},
actions: {},
modules: {},
getters: {},
};

在这里，我尝试访问正在定义的状态：

import { useStore } from 'vuex';
export default function useAddExistingFeatures() {
const store = useStore();
const area = store.layers.state.areas[1];
}

插件.js只是一个用来加载css文件的文件。

import { createApp } from 'vue';
import App from './App.vue';
import router from './router';
import { store } from './store';
import './plugins';
createApp(App).use(store).use(router).mount('#app');

Answer 1

您应该访问模块名称之前的state字段：

const area = store.state.layers..areas[1];

而不是const area = store.layers.state.areas[1];