Vuex: estado de acceso desde otro módulo

100

Quiero el acceso state.sessionen instance.jsdesde records_view.js. ¿Cómo se logra esto?

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

Esto es para agregar un poco de contexto.

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

javascript vue.js vuex

— Donnie
fuente

139

statehace referencia al estado local y rootStatedebe usarse al acceder al estado de otros módulos.

let session = context.rootState.instance.session;

Documentación: https://vuex.vuejs.org/en/modules.html

— Donnie
fuente

14

solo para agregar, también puede hacer cosas como context.rootGetters si desea acceder a un getter en lugar del estado directamente.

— Brad

Si bien es correcta, la respuesta anterior está incompleta. La publicación a continuación ilustra cómo pasar el contexto al que se hace referencia anteriormente a la acción.

— Luke F.

43

de una acción:

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

  },

— Thibault Van Campenhoudt
fuente

4

Aunque esto puede responder a la pregunta, siempre es bueno proporcionar una explicación de por qué el código funciona con referencias.

— Tim Hutchison

Para los principiantes, la sintaxis anterior es confusa. Es mejor pasar el contexto como un argumento y luego acceder a commit y rootstate a través de él. La taquigrafía es desorientadora. Esto es más fácil de entender: 'contactos: actualización' (contexto) {console.log ('rootState', context.rootState.users.form) ...... context.commit .......},

— Luke F.10 de

@LukeF. - Esta es la sintaxis estándar que se usa en la documentación de Vuex todas menos una vez, y también la forma en que se usa en casi todas partes. Cualquiera que haya mirado los documentos de acción lo habrá visto allí junto con la explicación de la desestructuración que se da allí.

— Dan

En efecto. Al mismo tiempo, muchos de nosotros no estaríamos aquí si la documentación fuera clara. :)

— Luke F.

Aquí también hay una referencia / explicación de la desestructuración que es más accesible que la cita que proporciona la documentación de Vue: cursos.bekwam.net/public_tutorials/… .

— Luke F.

7

Para mí, tenía módulos vuex, pero necesitaba una mutación para actualizar STATE en un archivo diferente. Pude lograr esto agregando ESTO

Incluso en el módulo puede ver a qué estado global tiene acceso a través de 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
fuente

2

En mi caso, así me funcionó.

En el archivo ModuleA.js:

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

En el archivo ModuleB:

export const state = {
    parameterInB: 'B'
 }

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

Deberá importar ModuleA & B en index.js para la raíz:

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

De esta manera, el parámetro de estado puede tener referencias cruzadas en submódulos.

— us_david
fuente

-3

Debe definir sessionen su estado lo siguiente, para acceder a él en sus getters :

const state = {
  session: ''
}

Debe escribir una mutación , que se llamará a partir de sus acciones para establecer este valor de estado.

— Saurabh
fuente

Tengo todo lo que mencionaste aquí. Puedo acceder a la sesión desde dentro de un componente, pero no estoy seguro de cómo acceder a la sesión desde dentro de otro módulo de Vuex (es decir, records_view.js).

— Donnie

3

@Donnie trycontext.rootState.instance.session

— Saurabh