3

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"?

This is what I have tried:

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'

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,
};
Improve this question
4
  • Is this a Vuex store? If so, it won't work properly even if you fix the import. Commented Jan 29, 2021 at 17:15
  • Can you explain more, please? I'm new to vuejs. I have not used Vuex and don't see it installed or imported tho Commented Jan 29, 2021 at 17:33
  • Well your module is arranged like a Vuex store but you didn't actually export a store, you exported the objects directly and then tried to import them directly instead of using the store in your component. I posted an answer to your question that explains exports in general but you could refer to Vuex docs to see how to setup / use a store properly. You're almost there. Commented Jan 29, 2021 at 17:47
  • I just looked at Vuex, Seems like the right way to go once I have a little more understanding. For now, this will get me half the way but I guess I don't have that persistent state. Commented Jan 29, 2021 at 17:49

2 Answers 2

Reset to default
12

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:

Default export examples

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

export default "Some string" // Default string export

Import these like:

import myExport from 'mymodule';  // no braces

Named export examples

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
Improve this answer
Sign up to request clarification or add additional context in comments.

Comments

1

I would imagine that this error is happening because it isn't finding the auth.js file. 'src/util/auth' is a relative path (by default in webpack) from the component file but I'm assuming (given the folder naming) that your component file isn't at the top level.

Either input the correct relative path or setup an absolute path alias within your webpack setup. This is a decent article explaining how to do this.

Improve this answer

1 Comment

Not sure, I can access a function like this in the same file i.e "export function test"

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.