从非 vue 文件访问 Vue 应用程序（this）答案

【问题标题】：Access Vue app (this) from non vue file从非 vue 文件访问 Vue 应用程序（this）
【发布时间】：2018-12-01 09:06:16
【问题描述】：

我是 vue 新手（开始使用 vue 2）我正在使用 Store (vuex)，我正在努力实现一些目标。基本上我设法安装了 vue-auth 插件：我有 this.$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: {}
})

感谢您的帮助

【问题讨论】：

您的问题令人困惑，我什么都不懂。你说“在存储/索引中我试图访问'this.$auth' ...”哪个存储/索引？
应该是Vue.$auth，或者将this.$auth作为store->actions的一个参数传递。
@samayo 是的，这就是我想做的。
@Sphinx 它不起作用，但是请参阅下面的答案，我必须将实例传递给 store.action 函数。

标签： vuejs2 vuex

【解决方案1】：

尝试在 index.js 中使用 Vue.$auth 它应该可以工作

【讨论】：

【解决方案2】：

这个想法（到目前为止）是将实例作为参数传递给函数，如下所示：

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

然后在 store -> actions 中，payload.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)

    });
},

我不知道这是否是最佳做法，但这就是我设法做到的。请随时提出任何建议。

【讨论】：