Vuex: एक और मॉड्यूल से एक्सेस स्टेट

107

मैं state.sessionअंदर instance.jsसे पहुंचना चाहता हूं records_view.js। यह कैसे पूरा किया जाता है?

दुकान / मॉड्यूल / instance.js

const state = {
  // This is what I want to access in records_view.js
  session: {}
};

const getters = {
  sessionGetter: state => state.session
};

दुकान / मॉड्यूल / records_view.js

const actions = {
  getSettingsAction (context, props) {
    // This is how I'm trying to access session, which doesn't work
    let session = context.state.instance.session;

    Api(
      context,
      {
        noun: props.noun,
        verb: 'GetRecordsViewSettings',
        orgUnitKey: _.has(session, 'orgunit.key') ? session.orgunit.key : '',
        data: {}
      },
      props.callback
    );
  }
};

यह थोड़ा सा जोड़ा संदर्भ के लिए है।

दुकान / index.js

import Vue from 'vue';
import Vuex from 'vuex';
import * as actions from './actions';
import * as getters from './getters';
import * as types from './mutation-types';

import instance from './modules/instance';
import recordsView from './modules/records_view';

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  actions,
  getters,
  mutations,
  modules: {
    instance,
    recordsView
  }
});

javascript vue.js vuex

— डॉनी
स्रोत

146

stateसंदर्भ स्थानीय स्थिति और rootStateअन्य मॉड्यूल की स्थिति का उपयोग करते समय उपयोग किया जाना चाहिए।

let session = context.rootState.instance.session;

प्रलेखन: https://vuex.vuejs.org/en/modules.html

— डॉनी
स्रोत

16

सिर्फ जोड़ने के लिए आप संदर्भ की तरह भी कर सकते हैं। अगर आप सीधे राज्य के बजाय एक गेट्टर का उपयोग करना चाहते हैं।

— ब्रैड

उपरोक्त उत्तर को सही करते समय अधूरा है। नीचे की पोस्ट में दर्शाया गया है कि उपरोक्त संदर्भ को कैसे पास किया जाए, जो कार्रवाई में संदर्भित है।

— ल्यूक एफ।

45

एक क्रिया से:

'contacts:update' ({ commit, rootState }) {
    console.log('rootState', rootState.users.form)
    ......

  },

— थिबॉल्ट वान कैम्पेनहौड
स्रोत

4

हालांकि यह सवाल का जवाब दे सकता है, यह हमेशा एक स्पष्टीकरण प्रदान करना अच्छा है कि कोड संदर्भों के साथ क्यों काम करता है।

— टिम हचिसन

शुरुआती के लिए उपरोक्त वाक्य रचना भ्रामक है। संदर्भ के रूप में एक तर्क के रूप में पारित करने के लिए बेहतर है और फिर इसके माध्यम से प्रतिबद्ध और मूल तक पहुंचें। आशुलिपि भटकाव है। यह समझना आसान है: 'संपर्क: अपडेट' (संदर्भ) {कंसोल.लॉग ('रूटस्टेट', संदर्भ ।rootState.users.form) ...... reference.commit .......},

— ल्यूक एफ।

1

@LukeF। - यह सभी समय में Vuex प्रलेखन में उपयोग किया जाने वाला मानक वाक्यविन्यास है , और यह भी कि यह हर जगह बस के बारे में उपयोग किया जाता है। जिस किसी ने भी एक्शन डॉक्स को देखा है, उसने इसे वहां दिए गए विनाश के स्पष्टीकरण के साथ देखा होगा।

— दान

वास्तव में। एक ही समय में हम में से कई यहाँ नहीं होगा अगर प्रलेखन स्पष्ट था। :)

— ल्यूक एफ।

यहाँ भी विनाश का एक संदर्भ / स्पष्टीकरण है जो कि हवाला प्रलेखन की तुलना में अधिक सुलभ है जो प्रदान करता है: पाठ्यक्रम । KBwam.net/public_tutorials/… ।

— ल्यूक एफ।

8

मेरे लिए मेरे पास vuex मॉड्यूल थे, लेकिन एक अलग फ़ाइल में STATE को अपडेट करने के लिए एक म्यूटेशन की आवश्यकता थी। THIS जोड़कर इसे पूरा करने में सक्षम था

यहां तक कि मॉड्यूल में आप देख सकते हैं कि कंसोल के माध्यम से आपके पास कौन-सी वैश्विक स्थिति है (यह .state)

const mutations = {
MuteChangeAmt(state, payload) {
//From user module; Need THIS keyword to access global state
this.state.user.payees.amount = payload.changedAmt;
 }
}

— दान कैसर
स्रोत

दिलचस्प। यह वास्तव में काम करता है। मुझे आश्चर्य है कि अगर यह एक दस्तावेज / समर्थित व्यवहार है जिस पर हम भरोसा कर सकते हैं, या बस एक अच्छा हैक कर सकते हैं। फिलहाल, मैं इस समाधान का उपयोग कर रहा हूं क्योंकि यह चेतावनी नहीं देता है और चीजें सही तरीके से व्यवहार करती हैं। धन्यवाद!

— namero999

आप, साथ ही उपयोग कर सकते हैंcontext.commit('user/change_amount', new_amount, {root: true})

— क्रिस

2

मेरे मामले में, यह मेरे लिए काम करता है।

फ़ाइल ModuleA.js में:

Module A:  
export const state = {
    parameterInA: 'A'
 }
export const action = {
    showParameterB() {
    console.log("Parameter B is: " + this.state.B. parameterInB)
}

फ़ाइल मॉड्यूल में:

export const state = {
    parameterInB: 'B'
 }

export const action = {
    showParameterA() {
    console.log("Parameter A is: " + this.state.A.parameterInA)
}

आपको रूट के लिए index.js में ModuleA & B को आयात करना होगा:

import * as A from 'ModuleA.js'  
import * as B from 'ModuleB.js'

इस तरह, राज्य मॉड्यूल को उप-मॉड्यूल में क्रॉस-रेफर किया जा सकता है।

— us_david
स्रोत

-3

आपको sessionअपने राज्य में परिभाषित करने की आवश्यकता है , जैसे कि अपने गेटर्स में इसे एक्सेस करने के लिए :

const state = {
  session: ''
}

आपको एक म्यूटेशन लिखना होगा, जिसे इस राज्य मान को सेट करने के लिए आपके कार्यों से बुलाया जाएगा।

— सौरभ
स्रोत

मेरे पास वह सब कुछ है जिसका आपने यहां उल्लेख किया है। मैं एक घटक के भीतर से सत्र का उपयोग कर सकता हूं, लेकिन मुझे यकीन नहीं है कि सत्र को किसी अन्य Vuex मॉड्यूल (यानी रिकॉर्ड्स_व्यू। Js) के अंदर कैसे एक्सेस किया जाए।

— डॉनी

3

@ डॉनी ने कोशिश कीcontext.rootState.instance.session

— सौरभ