使用import {}时未找到Vue.js错误导出 [英] Vue.js Error export was not found when using import { }

问题描述

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

In vue.js. I have the following auth.js, at the bottom of the js file it has "export default". In my Registration.vue file how do I access "actions"?

这是我尝试过的:

Registration.vue

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

错误:在"src/util/auth"中找不到导出操作"

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

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

This is the auth.js file full code here 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,
};

推荐答案

es6模块中有两种导出方式:解构不同看起来像.您不能在 import 语句内部进行销毁.将您的代码更改为:

There are two kinds of exports in es6 modules: named and default. When you see the braces { } in an import, that's the named import syntax. It's not the same as destructuring though it looks like it. You can't destructure inside an import statement. Change your code to:

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

以下是同时使用两种导出的一些示例:

Here are some examples of using both kinds of exports:

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 these like (note the braces):

import { myExport } from 'mymodule'   // braces

这篇关于使用import {}时未找到Vue.js错误导出的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！