Vue.js 使用 import { } 时找不到错误导出

Question

在vue.js。我有以下 auth.js，在 js 文件的底部它有“导出默认值”。在我的 Registration.vue 文件中，如何访问“操作”？

这是我试过的：

Registration.vue

import {actions} from 'src/util/auth';
export default {
  components: {
    actions
  },
  data(){
  },
  methods: { 
    submitReg() {
      console.log(actions)
    }
  }
}

error: export 'actions' was not found in 'src/util/auth'

这是 auth.js 文件的完整代码 https://gist.github.com/toricls/5c38d2930a36262f0674c1ffa8d5134a:

import Amplify, { Auth } from 'aws-amplify';


const state = {
  user: null,
};

const actions = {
  async getCurrentUserInfo({ commit }) {
    // This is returning null - why?
    // const user = await Auth.currentUserInfo();
    const user = await Auth.currentAuthenticatedUser();

    const attributes = await Auth.userAttributes(user);
    console.log(attributes);

    commit(types.AUTHENTICATE, {
      username: user.username,
      ...extractAttributes(attributes),
    });
  },

  async signIn({ commit }, { username, password }) {
    const user = await Auth.signIn(username, password);
    const attributes = await Auth.userAttributes(user);

    commit(types.AUTHENTICATE, {
      username: user.username,
      ...extractAttributes(attributes),
    });
  },

  async signOut() {
    await Auth.signOut();
  },

  async signUp(_, { username, password, firstName, lastName }) {
    const data = await Auth.signUp({
      username,
      password,
      attributes: {
        given_name: firstName,
        family_name: lastName,
      },
    });
    console.log(data);
  },
};

const mutations = {
  [types.AUTHENTICATE](state, payload) {
    state.user = payload;
  },
  [types.SIGNOUT](state) {
    state.user = null;
  },
};

export default {
  namespaced: true,
  state,
  actions,
  mutations,
};

Answer 1

我想这个错误的发生是因为它没有找到 auth.js 文件。 'src/util/auth' 是组件文件的相对路径（默认情况下在 webpack 中），但我假设（给定文件夹命名）您的组件文件不在顶层。

要么输入正确的相对路径，要么在你的 webpack 设置中设置一个绝对路径别名。 This 是一篇不错的文章，解释了如何做到这一点。

Answer 2

es6 模块中有两种导出：named and default. When you see the braces { } in an import, that's the named import syntax. It's not the same as destructuring 虽然看起来很像。您不能在 import 语句内部进行解构。将您的代码更改为：

import myExport from 'src/util/auth';
const { actions } = myExport;

以下是使用这两种导出的一些示例：

默认导出示例

export default { a: 1, b: 2 } // Default object export

export default "Some string" // Default string export

像这样导入：

import myExport from 'mymodule';  // no braces

命名导出示例

export const myExport = { a: 1, b: 2 } // named object export

export const myExport = "Some string"  // named string export

像这样导入（注意大括号）：

import { myExport } from 'mymodule'   // braces

Vue.js 使用 import { } 时找不到错误导出

Vue.js Error export was not found when using import { }

javascript

ecmascript-6

vue.js

es6-modules

vuejs2

默认导出示例

命名导出示例