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;