एक जावास्क्रिप्ट फ़ाइल (vue घटक के बजाए) vuex स्थिति कैसे प्राप्त करें

Question

मैं vuex (2.1.1) के साथ काम कर रहा हूं और चीजों को एकल फ़ाइल घटकों के भीतर काम कर रहा हूं। हालांकि मेरे vue एकल फ़ाइल घटक में बहुत अधिक क्रूर से बचने के लिए मैंने कुछ कार्यों को utils.js मॉड्यूल में ले जाया जो मैं vue-file में आयात करता हूं। इस utils.js में मैं vuex स्थिति को पढ़ना चाहता हूं। मैं उसे कैसे कर सकता हूँ? जैसा कि लगता है कि गेटर्स इत्यादि के साथ राज्य पहुंच रहा है, यह अनुमान लगा रहा है कि आप एक विय घटक के भीतर से काम कर रहे हैं या नहीं?

मैंने import state from '../store/modules/myvuexmodule' पर कोशिश की और फिर state.mystateproperty का संदर्भ लें लेकिन यह हमेशा 'अपरिभाषित' देता है, जबकि वू-डेवटोल्स में मैं देख सकता हूं कि राज्य की संपत्ति के उचित मूल्य हैं।

इस बिंदु पर मेरा अनुमान यह है कि यह बस राज्य के रूप में जाने का तरीका नहीं है। जेएस फ़ाइल के भीतर प्रॉपर्टी मूल्य प्रतिक्रियाशील नहीं होगा और इस प्रकार अपडेट या कुछ नहीं होगा, लेकिन शायद कोई पुष्टि/साबित कर सकता है मुझे गलत

Answer 1

बाहरी जेएस फ़ाइल में किसी ऑब्जेक्ट के रूप में स्टोर को एक्सेस करना संभव है, मैंने राज्य में बदलावों को प्रदर्शित करने के लिए एक परीक्षण भी जोड़ा है।

यहां बाहरी जे एस फ़ाइल है:

import { store } from '../store/store' 

export function getAuth() { 
    return store.state.authorization.AUTH_STATE 
} 

राज्य मॉड्यूल:

import * as NameSpace from '../NameSpace' 
/* 
    Import everything in NameSpace.js as an object. 
    call that object NameSpace. 
    NameSpace exports const strings. 
*/ 

import { ParseService } from '../../Services/parse' 

const state = { 
    [NameSpace.AUTH_STATE]: { 
    auth: {}, 
    error: null 
    } 
} 

const getters = { 
    [NameSpace.AUTH_GETTER]: state => { 
    return state[NameSpace.AUTH_STATE] 
    } 
} 

const mutations = { 
    [NameSpace.AUTH_MUTATION]: (state, payload) => { 
    state[NameSpace.AUTH_STATE] = payload 
    } 
} 

const actions = { 
    [NameSpace.ASYNC_AUTH_ACTION]: ({ commit }, payload) => { 
    ParseService.login(payload.username, payload.password) 
     .then((user) => { 
     commit(NameSpace.AUTH_MUTATION, {auth: user, error: null}) 
     }) 
     .catch((error) => { 
     commit(NameSpace.AUTH_MUTATION, {auth: [], error: error}) 
     }) 
    } 

export default { 
    state, 
    getters, 
    mutations, 
    actions 
} 

दुकान:

import Vue from 'vue' 
import Vuex from 'vuex' 
import authorization from './modules/authorization' 

Vue.use(Vuex) 

export const store = new Vuex.Store({ 
    modules: {   
    authorization  
    }     
})     

अब तक सब मैंने किया है एक js फ़ाइल बनाने है जो authorization राज्य चर की संपत्ति को वापस करने वाला फ़ंक्शन निर्यात करता है।

के परीक्षण के लिए एक घटक:

<template lang="html"> 
    <label class="login-label" for="username">Username 
     <input class="login-input-field" type="text" name="username" v-model="username"> 
    </label> 
    <label class="login-label" for="password" style="margin-top">Password 
     <input class="login-input-field" type="password" name="username" v-model="password"> 
    </label> 
    <button class="login-submit-btn primary-green-bg" type="button" @click="login(username, password)">Login</button> 
</template> 

<script> 
import { mapActions, mapGetters } from 'vuex' 
import * as NameSpace from '../../store/NameSpace' 
import { getAuth } from '../../Services/test' 

export default { 
    data() { 
    return { 
     username: '', 
     password: '' 
    } 
    }, 
    computed: { 
    ...mapGetters({ 
     authStateObject: NameSpace.AUTH_GETTER 
    }), 
    authState() { 
     return this.authStateObject.auth 
    }, 
    authError() { 
     return this.authStateObject.error 
    } 
    }, 
    watch: { 
    authError() { 
     console.log('watch: ', getAuth()) // ------------------------- [3] 
     } 
    }, 
    authState() { 
     if (this.authState.sessionToken) { 
     console.log('watch: ', getAuth()) // ------------------------- [2] 
     } 
    }, 
    methods: { 
    ...mapActions({ 
     authorize: NameSpace.ASYNC_AUTH_ACTION 
    }), 
    login (username, password) { 
     this.authorize({username, password}) 
     console.log(getAuth())    // ---------------------------[1] 
    } 
    } 
} 
</script> 

बटन क्लिक डिफ़ॉल्ट स्थिति पर कंसोल पर लॉग इन कर रहा है। मेरे मामले में कार्रवाई के परिणामस्वरूप एक एपीआई कॉल होता है, जिसके परिणामस्वरूप राज्य परिवर्तन होता है यदि उपयोगकर्ता नाम - पासवर्ड संयोजन में रिकॉर्ड होता है।

authState घड़ी में कंसोल दिखाने में सफलता का परिणाम परिणाम, आयातित कार्य राज्य में किए गए परिवर्तनों को प्रिंट कर सकता है।

इसी तरह, एक असफल मामले पर, authError पर नजर राज्य