首页 文章

从非vue文件访问Vue应用程序(this)

提问于
浏览
0

我是vue的新手(开始使用vue 2)我正在使用Store(vuex)而我正在努力实现某些目标 . 基本上我设法安装了vue-auth插件:我有这个 . $ auth我可以从.vue文件中调用 . 现在使用商店我想通过从vue文件调度这样的调用来调用userLogin函数:

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

在商店/索引我试图访问'this . $ auth'我明白是某种上下文切换但我不知道如何访问vue应用程序实例 . :

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: {}
})

谢谢你的帮助

1 回答

  • 0

    这个想法(到目前为止)是将实例作为参数传递给函数,如下所示:

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

    然后在 store -> actions 中, payload.auth 将包含我的auth插件:

    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)
    
        });
    },
    

    我不知道这是不是最好的做法,但这就是我设法做到的 . 请随时提出建议 .

相关问题