Vuex: стан доступу з іншого модуля


100

Я хочу , щоб отримати доступ state.sessionв instance.jsс records_view.js. Як це досягається?

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

Це для трохи доданого контексту.

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

Відповіді:


141

stateпосилається на локальний стан і rootStateповинен використовуватися при доступі до стану інших модулів.

let session = context.rootState.instance.session;

Документація: https://vuex.vuejs.org/en/modules.html


15
просто щоб додати, ви також можете робити такі речі, як context.rootGetters, якщо ви хочете отримати доступ до геттера, а не безпосередньо до стану.
Бред,

Правильна наведена вище відповідь є неповною. Нижче повідомлення ілюструє, як передати контекст, на який згадується вище, в дії.
Люк Ф.

43

від дії:

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

  },

4
Хоча це може відповісти на запитання, завжди добре дати пояснення, чому код працює із посиланнями.
Тім Хатчісон

Для початківців вищезазначений синтаксис бентежить. Краще передати в контексті як аргумент, а потім отримати доступ до коміту та roottate через нього. Стенографія дезорієнтує. Це легше зрозуміти: 'contacts: update' (context) {console.log ('rootState', context.rootState.users.form) ...... context.commit .......},
Люк Ф.

@LukeF. - Це стандартний синтаксис, що використовується у документації Vuex весь час, крім одного разу, а також спосіб його використання майже скрізь. Той, хто ознайомився з документами дій , побачить його там, а також пояснення деструктуризації, подане там.
Ден,

Справді. У той же час багатьох з нас не було б тут, якби документація була чіткою. :)
Люк Ф.

Ось також посилання / пояснення деструктуризації, які є більш доступними, ніж цитати, які надає документація Vue: courses.bekwam.net/public_tutorials/… .
Люк Ф.

7

Для мене у мене були модулі vuex, але потрібна була мутація для оновлення STATE в іншому файлі. Це вдалося досягти, додавши ЦЕ

Навіть у модулі ви можете побачити, до якого глобального стану ви маєте доступ через 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;
 }
}

2

У моєму випадку це у мене так спрацювало.

У файлі ModuleA.js:

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

У файлі ModuleB:

export const state = {
    parameterInB: 'B'
 }

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

Вам потрібно буде імпортувати ModuleA & B в index.js для кореня:

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

Таким чином, параметр стану може бути перехресним посиланням у підмодулях.


-3

Вам потрібно визначити sessionу своєму штаті, як показано нижче, щоб отримати доступ до нього у ваших геттерах :

const state = {
  session: ''
}

Вам потрібно написати мутацію , яка буде викликана з ваших дій, щоб встановити це значення стану.


У мене є все, що ви тут згадали. Я можу отримати доступ до сеансу всередині компонента, але я не впевнений, як отримати доступ до сеансу зсередини іншого модуля Vuex (тобто records_view.js).
Донні

3
@Donnie trycontext.rootState.instance.session
Saurabh
Використовуючи наш веб-сайт, ви визнаєте, що прочитали та зрозуміли наші Політику щодо файлів cookie та Політику конфіденційності.
Licensed under cc by-sa 3.0 with attribution required.