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

【问题标题】：Vue.js Error export was not found when using import { }Vue.js 使用 import { } 时找不到导出错误
【发布时间】：2021-05-03 15:00:38
【问题描述】：

在 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)
    }
  }
}

错误：在“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,
};

【问题讨论】：

这是 Vuex 商店吗？如果是这样，即使您修复了导入，它也无法正常工作。
你能解释一下吗？我是 vuejs 的新手。我没有使用过 Vuex，也没有看到它安装或导入
嗯，你的模块被安排得像一个 Vuex 商店，但你实际上并没有导出一个商店，你直接导出了对象，然后尝试直接导入它们，而不是在你的组件中使用商店。我发布了一个回答您的问题的答案，一般解释了导出，但您可以参考 Vuex 文档以了解如何正确设置/使用商店。你快到了。
我只是看了一下 Vuex，一旦我有了更多的了解，这似乎是正确的方法。就目前而言，这将使我成功，但我想我没有那种持久的状态。

标签： javascript vue.js ecmascript-6 vuejs2 es6-modules

【解决方案1】：

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

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

【讨论】：

不确定，我可以在同一个文件中访问这样的函数，即“导出函数测试”

【解决方案2】：

es6模块中有两种exports：named和default。当您在导入中看到大括号 { } 时，这就是命名的导入语法。它和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

【讨论】：