vue가 아닌 파일에서 vue app(이) 액세스

vue가 아닌 파일에서 vue app(이) 액세스

저는 vue를 처음 사용합니다(vue 2 사용하기 시작했습니다) Store(vuex)를 사용하고 있는데 뭔가를 얻으려고 합니다. 기본적으로 vue-auth 플러그인을 설치했습니다: 이것이 있습니다..vue 파일 내에서 호출할 수 있는 $auth.이제 스토어를 사용하여 다음과 같은 통화를 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>

스토어/인덱스에서 '이것'에 액세스하려고 합니다.$auth' 컨텍스트 전환의 일종으로 이해하지만 vue app 인스턴스에 액세스하는 방법을 모르겠습니다.:

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

도와주셔서 고마워요.

사용해 보다Vue.$authindex.js에서 작동해야 합니다.

(지금까지) 이 개념은 다음과 같이 함수에 인수로 인스턴스를 전달하는 것입니다.

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

그런 다음 저장소 -> 작업, 페이로드.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)

    });
},

이게 최선의 방법인지는 모르겠지만, 이렇게 할 수 있었습니다.무엇이든 자유롭게 제안해 주십시오.

언급URL : https://stackoverflow.com/questions/50978582/access-vue-app-this-from-non-vue-file