es6进口'解构'不起作用

Question

嘿,我有这个uiTypes.js文件,如下所示:

export default {
  SELECT_ITEM: 'SELECT_ITEM',
  DESELECT_ITEM: 'DESELECT_ITEM',
  TOGGLE_ITEM: 'TOGGLE_ITEM',
}

当我尝试像这样导入其内容时,它可以工作:

import uiTypes from './uiTypes';
console.log(uiTypes.SELECT_ITEM) // 'SELECT_ITEM'

但不是这样的:

import { SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM } from './uiTypes';
console.log(SELECT_ITEM) // undefined,

我错过了什么吗？

Answer 1

导入没有解构(另请注意,导出和导入使用关键字as而不是冒号来避免与对象混淆).您可以导入默认导出,单个命名导出或模块命名空间对象.

您的尝试是尝试导入三个命名导出,而只有一个默认导出; 这就是它失败的原因.

您应该使用命名导出:

export const SELECT_ITEM = 'SELECT_ITEM';
export const DESELECT_ITEM = 'DESELECT_ITEM';
export const TOGGLE_ITEM = 'TOGGLE_ITEM';

或者在导入对象后使用"真正的"解构:

import uiTypes from './uiTypes';
const {SELECT_ITEM, DESELECT_ITEM, TOGGLE_ITEM} = uiTypes;