Vuex 访问模块状态从商店

时间:2021-06-10 13:27:06

标签: vue.js vuex vuejs3 vuex4

我有一个被分成多个模块的 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');

1 个答案:

答案 0 :(得分:2)

您应该可以访问模块名称之前的 state 字段:

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

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