Vuex: สถานะการเข้าถึงจากโมดูลอื่น


100

ฉันต้องการที่จะเข้าถึงstate.sessionในจากinstance.js records_view.jsสิ่งนี้สำเร็จได้อย่างไร?

store / module / instance.js

const state = {
  // This is what I want to access in records_view.js
  session: {}
};

const getters = {
  sessionGetter: state => state.session
};

store / module / 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
  }
});

คำตอบ:


139

stateอ้างอิงสถานะท้องถิ่นและrootStateควรใช้เมื่อเข้าถึงสถานะของโมดูลอื่น ๆ

let session = context.rootState.instance.session;

เอกสารประกอบ: https://vuex.vuejs.org/en/modules.html


14
เพียงแค่เพิ่มคุณยังสามารถทำสิ่งต่างๆเช่น context.rootGetters หากคุณต้องการเข้าถึง getter แทนที่จะเป็นรัฐโดยตรง
แบรด

ในขณะที่การแก้ไขคำตอบข้างต้นยังไม่สมบูรณ์โพสต์ด้านล่างนี้แสดงให้เห็นถึงวิธีการส่งบริบทที่อ้างถึงข้างต้นไปสู่การดำเนินการ
Luke F.

43

จากการกระทำ:

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

  },

4
แม้ว่าสิ่งนี้อาจตอบคำถามได้ แต่ก็ควรให้คำอธิบายว่าเหตุใดโค้ดจึงทำงานร่วมกับการอ้างอิงได้
Tim Hutchison

สำหรับผู้เริ่มต้นไวยากรณ์ข้างต้นจะสับสน ดีกว่าที่จะส่งผ่านในบริบทเป็นอาร์กิวเมนต์จากนั้นเข้าถึงการกระทำและรูทสเตทผ่านมัน ชวเลขกำลังสับสน สิ่งนี้เข้าใจง่ายกว่า: 'contact: update' (บริบท) {console.log ('rootState', context.rootState.users.form) ...... context.commit ....... },
Luke F.

@LukeF. - นี่คือไวยากรณ์มาตรฐานที่ใช้ในเอกสาร Vuexครั้งเดียวและยังเป็นวิธีที่ใช้ในทุกที่ ใครก็ตามที่ได้ดูเอกสารการกระทำจะได้เห็นมันพร้อมกับคำอธิบายของการทำลายล้างที่ให้ไว้ที่นั่น
แดน

แน่นอน. ในเวลาเดียวกันพวกเราหลายคนจะไม่มาที่นี่หากเอกสารมีความชัดเจน :)
Luke F.

ที่นี่ยังเป็นแหล่งอ้างอิง / คำอธิบาย destructuring ที่สามารถเข้าถึงได้มากขึ้นกว่าอ้างว่าเอกสาร Vue ให้: courses.bekwam.net/public_tutorials/...
Luke F.

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ในสถานะของคุณดังต่อไปนี้เพื่อเข้าถึงในgettersของคุณ:

const state = {
  session: ''
}

คุณต้องเขียนการกลายพันธุ์ซึ่งจะถูกเรียกจากการกระทำของคุณเพื่อกำหนดค่าสถานะนี้


ฉันมีทุกอย่างที่คุณพูดถึงที่นี่ ฉันสามารถเข้าถึงเซสชันจากภายในคอมโพเนนต์ แต่ฉันไม่แน่ใจว่าจะเข้าถึงเซสชันจากภายในโมดูล Vuex อื่นได้อย่างไร (เช่น records_view.js)
Donnie

3
@ Donnie trycontext.rootState.instance.session
Saurabh
โดยการใช้ไซต์ของเรา หมายความว่าคุณได้อ่านและทำความเข้าใจนโยบายคุกกี้และนโยบายความเป็นส่วนตัวของเราแล้ว
Licensed under cc by-sa 3.0 with attribution required.