export 与 export default 的区别及解构问题

今天在使用vue导出一个对象：

// plugin.js
export default { store };

然后在另一个文件中导入上面的文件，并且进行解构操作

// main.js
import { store } from '@/plugin';
console.log(store); // undefined

然后发现 store 总是 undefined，我就奇了怪。但是通过

// main.js
import obj from '@/plugin';
console.log(obj); // { store: {...} }

但是我就是想用解构输出，最后查找博客总结如下内容。当然我的疑惑也就解开了，完美的实现我想要的效果。

export 导出

1. 仅限导出的类型有：变量、函数
2. 一个js文件可以多次利用 export 导出多个函数或变量。
3. 别的js文件在使用 import 导入的时候，需要用花括号({})解构，并且解构的名称必须和导出时定义的名称相同。

export default 导出(默认导出)

1. 可以导出的有：变量、函数、数组、对象
2. 一个js文件只能存在一个 export default
3. 别的js文件在使用 import 导入的时候，不能使用解构，否则拿到的只能时 undefind

示例代码

// other.js 使用 export 导出
export let name = "小海";
export let age = 17;
export functiion getInfo(){
    return `姓名：${name}，年龄：${age}`;
};

// another.js 使用 export default 导出
export default {
    name: '小欣',
    age: 14,
    getInfo: function(){
        return `姓名：${this.name}，年龄：${this.age}`;
    }
};

// main.js 导入上面两个js文件
import { name, age, getInfo } from "other.js";
console.log(name, age, getInfo()); // 小海 17 姓名：小海，年龄：17

import user from "another.js";
console.log(user.getInfo()); // 姓名：小欣，年龄：14