Vuex 从 store 访问模块状态

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];
}

我的main.js。 plugins.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];

Vuex 从 store 访问模块状态

Vuex access modules state in from store

vue.js

vuex

vuejs3

vuex4