Vuex:別のモジュールからのアクセス状態


106

私がアクセスできるようにする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
  }
});

回答:


145

stateローカル状態を参照しrootState、他のモジュールの状態にアクセスするときに使用する必要があります。

let session = context.rootState.instance.session;

ドキュメント:https//vuex.vuejs.org/en/modules.html


16
追加するだけで、状態ではなくゲッターに直接アクセスしたい場合は、context.rootGettersのようなこともできます。
ブラッド

正解ですが、上記の回答は不完全です。以下の投稿は、上記で参照されているコンテキストをアクションに渡す方法を示しています。
ルークF.20年

45

アクションから:

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

  },

4
これは質問に答えるかもしれませんが、コードが参照で機能する理由の説明を提供することは常に良いことです。
ティムハッチソン2017年

初心者にとって、上記の構文は混乱を招きます。コンテキストを引数として渡してから、commitとrootstateにアクセスすることをお勧めします。速記は方向感覚を失います。これは理解しやすいです: 'contacts:update'(context){console.log( 'rootState'、context.rootState.users.form)...... context.commit .......}、
ルークF.20年

1
@LukeF。-これは、Vuexドキュメントで一度だけ使用される標準の構文であり、他のほとんどすべての場所で使用される方法でもあります。アクションドキュメントを見た人は誰でも、そこで与えられた破壊の説明とともにそれを見たことがあるでしょう。
ダン

確かに。同時に、ドキュメントが明確であれば、私たちの多くはここにいません。:)
ルークF.20年

Vueのドキュメントが提供する引用よりもアクセスしやすい破壊のリファレンス/説明もここにあります: courses.bekwam.net/public_tutorials/…
ルークF.20年

8

私の場合、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;
 }
}

面白い。これは確かに機能します。これは、信頼できる文書化された/サポートされている動作なのか、それとも単なるハックなのかと思います。とりあえず、警告が出ず、正しく動作するので、このソリューションを使用しています。ありがとう!
namero9 9920

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

ルートのindex.jsにModuleAとBをインポートする必要があります。

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

このようにして、状態パラメーターをサブモジュールで相互参照できます。


-3

ゲッターでsessionアクセスするには、次のように状態を定義する必要があります。

const state = {
  session: ''
}

この状態値を設定するためにアクションから呼び出されるミューテーションを作成する必要があります。


私はあなたがここで言及したすべてを持っています。コンポーネント内からセッションにアクセスできますが、別のVuexモジュール(つまり、records_view.js)内からセッションにアクセスする方法がわかりません。
ドニー2016

3
@Donnie trycontext.rootState.instance.session
Saurabh
弊社のサイトを使用することにより、あなたは弊社のクッキーポリシーおよびプライバシーポリシーを読み、理解したものとみなされます。
Licensed under cc by-sa 3.0 with attribution required.