Access Vue app (this) from non vue file

Question

I'm new to vue (started using vue 2) I'm using Store (vuex) and I'm trying to acheive something. basically I managed to install the vue-auth plugin : I have this.$auth that I can call from within .vue files. Now using the store I wanna call the userLogin function by dispatching the call like this from a vue file :

<script>
export default {
  computed: {
    comparePasswords() {
      return this.password === this.passwordConfirm
        ? true
        : "Passwords don't match";
    }
  },
  methods: {
    userSignUp() {
      if (this.comparePasswords !== true) {
        return;
      }
      this.$store.dispatch("userSignUp", {
        email: this.email,
        password: this.password
      });
    }
  },
  data() {
    return {
      email: "",
      password: "",
      passwordConfirm: ""
    };
  }
};
</script>

in the store/index I'm trying to access the 'this.$auth' I do understand is some kind of context switching but I don't know how to access the vue app instance. :

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)
let app = this
export const store = new Vuex.Store({
  state: {
    appTitle: 'LiveScale Dashboard',
    user: null,
    error: null,
    loading: false
  },
  mutations: {
    setUser(state, payload) {
      state.user = payload
    },
    setError(state, payload) {
      state.error = payload
    },
    setLoading(state, payload) {
      state.loading = payload
    }
  },
  actions: {
    userLogin({ commit }, payload) {

      commit('setLoading', true)

      var redirect = this.$auth.redirect(); // THIS IS WRONG.
      this.$auth.login({                 // THIS IS WRONG. 
        body: payload, // Vue-resource
        data: payload, // Axios
        rememberMe: this.data.rememberMe,
        redirect: { name: redirect ? redirect.from.name : 'account' },
        fetchUser: this.data.fetchUser
      })
        .then(() => {
          commit('setUser', this.context)
          commit('setLoading', false)
          router.push('/home')
        }, (res) => {
          console.log('error ' + this.context);
          commit('setError', res.data)
          commit('setLoading', false)

        });
    },
    userSignUp({ commit }, payload) {
       // ...
    }
  },
  getters: {}
})

Thanks for your help

your question is confusing, I didn't understand anything. You say "in the store/index I'm trying to access the 'this.$auth' ..." which store/index? — samayo
– samayo, Commented Jun 21, 2018 at 23:26
it should be Vue.$auth, or pass this.$auth as one parameter of store->actions. — Sphinx
– Sphinx, Commented Jun 21, 2018 at 23:35
@Sphinx it didn't work, however see my answer below, i had to pass the instance to the store.action function. — M. Gara
– M. Gara, Commented Jun 21, 2018 at 23:56

Youssef · Accepted Answer · 2019-08-21 03:47:11Z

1

try using Vue.$auth in index.js it should work

answered Aug 21, 2019 at 3:47

Youssef

466 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

M. Gara · Accepted Answer · 2018-06-21 23:53:42Z

The idea (so far) is to pass the instance as an argument to the function as follows :

  this.$store.dispatch("userSignUp", {
    email: this.email,
    password: this.password,
    auth: this.$auth  //added this line
  });

and then in the store -> actions , payload.auth will contain my auth plugin :

userLogin({ commit }, payload) {

  commit('setLoading', true)

  var redirect = payload.auth.redirect();
  payload.auth.login({
    body: payload, // Vue-resource
    data: payload, // Axios
    rememberMe: this.data.rememberMe,
    redirect: { name: redirect ? redirect.from.name : 'account' },
    fetchUser: this.data.fetchUser
  })
    .then(() => {
      commit('setUser', this.context)
      commit('setLoading', false)
      router.push('/home')
    }, (res) => {
      console.log('error ' + this.context);
      commit('setError', res.data)
      commit('setLoading', false)

    });
},

I don't know if it's the best practice or not, but this is how I managed to do it. Please feel free to suggest anything.

Collectives™ on Stack Overflow

Access Vue app (this) from non vue file

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related