Vuex: estado de acesso de outro módulo

107

Quero acessar state.sessionem instance.jsde records_view.js. Como isso é feito?

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

Isso é para adicionar um pouco 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
fonte

146

statefaz referência ao estado local e rootStatedeve ser usado ao acessar o estado de outros módulos.

let session = context.rootState.instance.session;

Documentação: https://vuex.vuejs.org/en/modules.html

— Donnie
fonte

16

apenas para adicionar, você também pode fazer coisas como context.rootGetters se quiser acessar um getter em vez de acessar o estado diretamente.

— Brad

Embora correta, a resposta acima está incompleta. A postagem abaixo ilustra como passar o contexto referenciado acima para a ação.

— Lucas F.

45

de uma ação:

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

  },

— Thibault Van Campenhoudt
fonte

4

Embora isso possa responder à pergunta, é sempre bom fornecer uma explicação de por que o código funciona com referências.

— Tim Hutchison

Para iniciantes, a sintaxe acima é confusa. Melhor passar o contexto como um argumento e então acessar commit e rootstate através dele. A taquigrafia é desorientadora. Isso é mais fácil de entender: 'contacts: update' (context) {console.log ('rootState', context.rootState.users.form) ...... context.commit .......},

— Lucas F.

1

@LukeF. - Esta é a sintaxe padrão usada na documentação do Vuex, exceto uma vez, e também a forma como é usada em todos os outros lugares. Qualquer pessoa que tenha olhado os documentos de ação terá visto lá junto com a explicação de desestruturação fornecida ali.

— Dan,

De fato. Ao mesmo tempo, muitos de nós não estaríamos aqui se a documentação fosse clara. :)

— Luke F.

Aqui também está uma referência / explicação da desestruturação que é mais acessível do que a citação que a documentação do Vue fornece: cursos.bekwam.net/public_tutorials/… .

— Luke F.

8

Para mim, eu tinha módulos vuex, mas precisava de uma mutação para atualizar o STATE em um arquivo diferente. Consegui fazer isso adicionando ESTE

Mesmo no módulo, você pode ver a qual estado global você tem acesso via 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
fonte

Interessante. Isso realmente funciona. Eu me pergunto se este é um comportamento documentado / com suporte em que podemos confiar, ou apenas um bom hack. Por enquanto, estou usando essa solução, pois ela não gera avisos e as coisas se comportam corretamente. Obrigado!

— namero999

Você também pode usarcontext.commit('user/change_amount', new_amount, {root: true})

— Kris

2

No meu caso, é assim que funcionou para mim.

No arquivo ModuleA.js:

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

No arquivo Módulo B:

export const state = {
    parameterInB: 'B'
 }

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

Você precisará importar o Módulo A e B no index.js para a raiz:

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

Dessa forma, o parâmetro de estado pode ser referenciado em submódulos.

— us_david
fonte

-3

Você precisa definir sessionem seu estado como a seguir, para acessá-lo em seus getters :

const state = {
  session: ''
}

Você deve escrever uma mutação , que será chamada de suas ações para definir este valor de estado.

— Saurabh
fonte

Tenho tudo o que você mencionou aqui. Posso acessar a sessão de dentro de um componente, mas não tenho certeza de como acessar a sessão de dentro de outro módulo Vuex (ou seja, records_view.js).

— Donnie

3

@Donnie trycontext.rootState.instance.session

— Saurabh