Vuex: Zugriffsstatus von einem anderen Modul

100

Ich möchte den Zugang state.sessionin instance.jsvon records_view.js. Wie wird das erreicht?

store / modules / instance.js

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

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

store / modules / 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
    );
  }
};

Dies ist für ein wenig zusätzlichen Kontext.

store / 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
  }
});
Donnie
quelle

Antworten:

139

stateverweist auf den lokalen Status und rootStatesollte beim Zugriff auf den Status anderer Module verwendet werden.

let session = context.rootState.instance.session;

Dokumentation: https://vuex.vuejs.org/en/modules.html

Donnie
quelle
14
Nur zum Hinzufügen können Sie auch Dinge wie context.rootGetters ausführen, wenn Sie direkt auf einen Getter und nicht auf den Status zugreifen möchten.
Brad
Die obige Antwort ist zwar korrekt, aber unvollständig. Der folgende Beitrag zeigt, wie der oben genannte Kontext an die Aktion übergeben wird.
Luke F.
42

von einer Aktion:

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

  },
Thibault Van Campenhoudt
quelle
4
Obwohl dies die Frage beantworten kann, ist es immer gut zu erklären, warum der Code mit Referenzen arbeitet.
Tim Hutchison
Für Anfänger ist die obige Syntax verwirrend. Es ist besser, den Kontext als Argument zu übergeben und dann über ihn auf Commit und Rootstate zuzugreifen. Die Kurzschrift ist desorientiert. Dies ist einfacher zu verstehen: 'Kontakte: Aktualisierung' (Kontext) {console.log ('rootState', context.rootState.users.form) ...... context.commit .......},
Luke F.
@ LukeF. - Dies ist die Standard-Syntax, die in der Vuex-Dokumentation bis auf ein Mal verwendet wird, und auch die Art und Weise, wie sie fast überall verwendet wird. Wer sich die Aktion geschaut hat docs wird es haben dort gesehen zusammen mit der Erklärung der dort gegebenen Destrukturierung.
Dan
Tatsächlich. Gleichzeitig wären viele von uns nicht hier, wenn die Dokumentation klar wäre. :)
Luke F.
Hier finden Sie auch eine Referenz / Erklärung zur Destrukturierung, die zugänglicher ist als das Zitat, das in der Vue-Dokumentation enthalten ist: Kurse.bekwam.net/public_tutorials/… .
Luke F.
7

Für mich hatte ich Vuex-Module, brauchte aber eine Mutation, um STATE in einer anderen Datei zu aktualisieren. Konnte dies durch Hinzufügen von DIESEM erreichen

Sogar im Modul können Sie sehen, auf welchen globalen Status Sie über console.log (this.state) zugreifen können.

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

In meinem Fall hat das bei mir so funktioniert:
In der Datei ModuleA.js:

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

In der Datei ModulB:

export const state = {
    parameterInB: 'B'
 }

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

Sie müssen ModuleA & B in die index.js für den Stamm importieren:

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

Auf diese Weise kann auf Statusparameter in Untermodulen verwiesen werden. Hoffe das hilft.

David

us_david
quelle
-3

Sie müssen sessionin Ihrem Bundesstaat Folgendes definieren, um in Ihren Gettern darauf zugreifen zu können :

const state = {
  session: ''
}

Sie müssen eine Mutation schreiben , die von Ihren Aktionen aufgerufen wird, um diesen Statuswert festzulegen.

Saurabh
quelle
Ich habe alles, was Sie hier erwähnt haben. Ich kann von einer Komponente aus auf die Sitzung zugreifen, bin mir jedoch nicht sicher, wie ich von einem anderen Vuex-Modul (dh records_view.js) auf die Sitzung zugreifen soll.
Donnie
3
@ Donnie versuchencontext.rootState.instance.session
Saurabh