Vuex: dostęp do stanu z innego modułu

108

Chcę, aby uzyskać dostęp state.sessionw instance.jsod records_view.js. Jak to się robi?

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
    );
  }
};

To jest dla trochę dodatkowego kontekstu.

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
źródło

Odpowiedzi:

146

stateodwołuje się do stanu lokalnego i rootStatepowinien być używany podczas uzyskiwania dostępu do stanu innych modułów.

let session = context.rootState.instance.session;

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

Donnie
źródło
16
aby dodać, możesz również wykonać takie czynności, jak context.rootGetters, jeśli chcesz uzyskać dostęp do metody pobierającej, a nie bezpośrednio do stanu.
Brad,
Chociaż poprawna powyższa odpowiedź jest niekompletna. Poniższy post ilustruje, jak przekazać kontekst, do którego odwołujemy się powyżej, do akcji.
Luke F.
46

z akcji:

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

  },
Thibault Van Campenhoudt
źródło
4
Chociaż może to odpowiedzieć na pytanie, zawsze dobrze jest wyjaśnić, dlaczego kod działa z odwołaniami.
Tim Hutchison
Dla początkujących powyższa składnia jest myląca. Lepiej jest przekazać kontekst jako argument, a następnie uzyskać za jego pośrednictwem dostęp do zatwierdzenia i stanu głównego. Stenogram jest dezorientujący. Jest to łatwiejsze do zrozumienia: 'kontakty: aktualizacja' (kontekst) {console.log ('rootState', context.rootState.users.form) ...... context.commit .......},
Luke F.
1
@LukeF. - To jest standardowa składnia używana w dokumentacji Vuex prawie raz, a także sposób, w jaki jest używana prawie wszędzie. Każdy, kto obejrzał dokumentację akcji , zobaczy go tam wraz z podanym tam wyjaśnieniem destrukturyzacji.
Dan,
W rzeczy samej. Jednocześnie wielu z nas nie byłoby tutaj, gdyby dokumentacja była jasna. :)
Luke F.
Tutaj również znajduje się odniesienie / wyjaśnienie destrukturyzacji, które jest bardziej dostępne niż cytat, który zapewnia dokumentacja Vue: course.bekwam.net/public_tutorials/… .
Luke F.
8

U mnie miałem moduły vuex, ale potrzebowałem mutacji, aby zaktualizować STATE w innym pliku. Udało mi się to osiągnąć, dodając TO

Nawet w module możesz zobaczyć do jakiego stanu globalnego masz dostęp poprzez console.log (this.state)

const mutations = {
MuteChangeAmt(state, payload) {
//From user module; Need THIS keyword to access global state
this.state.user.payees.amount = payload.changedAmt;
 }
}
Dan Kaiser
źródło
Ciekawy. To rzeczywiście działa. Zastanawiam się, czy jest to udokumentowane / obsługiwane zachowanie, na którym możemy polegać, czy po prostu fajny hack. Na razie używam tego rozwiązania, ponieważ nie generuje ostrzeżeń i rzeczy zachowują się poprawnie. Dzięki!
namero999
Możesz też po prostu użyćcontext.commit('user/change_amount', new_amount, {root: true})
Kris
2

W moim przypadku tak to zadziałało.

W pliku ModuleA.js:

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

W pliku ModuleB:

export const state = {
    parameterInB: 'B'
 }

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

Będziesz musiał zaimportować ModuleA i B w pliku index.js dla katalogu głównego:

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

W ten sposób parametr stanu może być powiązany z podmodułami.

us_david
źródło
-3

Musisz zdefiniować sessionw swoim stanie, na przykład następujące, aby uzyskać do niego dostęp w swoich getterach :

const state = {
  session: ''
}

Musisz napisać mutację , która zostanie wywołana z twoich działań, aby ustawić wartość tego stanu.

Saurabh
źródło
Mam wszystko, o czym tu wspomniałeś. Mogę uzyskać dostęp do sesji z poziomu komponentu, ale nie jestem pewien, jak uzyskać dostęp do sesji z wnętrza innego modułu Vuex (tj. Records_view.js).
Donnie
3
@Donnie trycontext.rootState.instance.session
Saurabh