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

Question

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

这是我尝试过的：

注册.vue

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

错误：在“src/util/auth”中找不到导出“actions”

这是 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

es6 模块中有两种导出：named和default。{ }当您在导入中看到大括号时，这就是命名导入语法。尽管它看起来像解构，但它与解构不同。您无法在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