从模块导入解构

Question

我在名为“vuex”的文件夹中有一个index.js，其中包含以下内容

const module = { state, mutations, actions, getters }

export default { module, plugin }

状态，突变，操作是从另一个文件导入的

我正试图在另一个文件中获取“state”属性，所以我

import module from './veux'

然后

const { state } = module

然而state 未定义这很奇怪，因为console.log(module)告诉我module.state存在

我是ES6-7流程的新手，但我到底错在了什么？

Answer 1

由于您已将对象{module, plugin}导出为default export

导入后

import module from './veux'

模块将具有类似

的结构

module = {
    module: { state, mutations, actions, getters },
    plugin
}

因此，为了访问状态，您将编写module.module.state或

const {module: {state}} = module; // nested destructuring
console.log(state)

一种易于理解和可读的方法是使用命名导出导出模块，如

export const module = { state, mutations, actions, getters }

export default plugin

并将其导入为

import plugin, { module } from './veux'

之后你可以做

const { state } = module;

Answer 2

  

我正试图在另一个文件中获取“state”属性，所以我

import module from './veux'
const { state } = module

     

然而状态是未定义的，这很奇怪，因为console.log（模块）   告诉我module.state存在

不，您要将整个默认导出的对象（其module和plugin属性）导入为module。该属性为module.module.state。

  

我在名为“vuex”的文件夹中有一个index.js，其中包含以下内容

const module = { state, mutations, actions, getters }
export default { module, plugin }

别。使用命名导出来导出多个东西：

export const module = { state, mutations, actions, getters }
export { plugin }

然后你可以做

import { module } from './veux'
const { state } = module

Answer 3

如果您这样做，它将起作用：

import { module } from './veux';