Vuex: Status Akses Dari Modul Lain

100

Saya ingin akses state.sessiondi instance.jsdari records_view.js. Bagaimana ini tercapai?

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

Ini untuk sedikit konteks tambahan.

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
sumber

140

statemerujuk status lokal dan rootStateharus digunakan saat mengakses status modul lain.

let session = context.rootState.instance.session;

Dokumentasi: https://vuex.vuejs.org/en/modules.html

— Donnie
sumber

14

hanya untuk menambahkan, Anda juga dapat melakukan hal-hal seperti context.rootGetters jika Anda ingin mengakses pengambil alih-alih status secara langsung.

— Brad

Meskipun benar, jawaban di atas tidak lengkap. Postingan di bawah ini menggambarkan cara meneruskan konteks yang dirujuk di atas ke dalam tindakan.

— Luke F.

43

dari suatu tindakan:

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

  },

— Thibault Van Campenhoudt
sumber

4

Meskipun ini mungkin menjawab pertanyaan, itu selalu baik untuk memberikan penjelasan mengapa kode bekerja dengan referensi.

— Tim Hutchison

Untuk pemula sintaks di atas membingungkan. Lebih baik meneruskan konteks sebagai argumen dan kemudian mengakses commit dan rootstate melaluinya. Singkatan itu membingungkan. Ini lebih mudah dipahami: 'contacts: update' (context) {console.log ('rootState', context.rootState.users.form) ...... context.commit .......},

— Luke F.

@Lukas - Ini adalah sintaks standar yang digunakan dalam dokumentasi Vuex kecuali satu kali, dan juga cara penggunaannya hampir di semua tempat. Siapa pun yang telah melihat dokumen tindakan akan melihatnya di sana bersama dengan penjelasan tentang penghancuran yang diberikan di sana.

— Dan

Memang. Pada saat yang sama, banyak dari kita tidak akan berada di sini jika dokumentasinya jelas. :)

— Luke F.

Berikut ini juga referensi / penjelasan tentang penghancuran yang lebih dapat diakses daripada kutipan yang disediakan oleh dokumentasi Vue: course.bekwam.net/public_tutorials/… .

— Luke F.

7

Bagi saya, saya memiliki modul vuex, tetapi membutuhkan mutasi untuk memperbarui STATE di file yang berbeda. Mampu mencapai ini dengan menambahkan INI

Bahkan dalam modul Anda dapat melihat status global apa yang Anda miliki aksesnya melalui 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
sumber

2

Dalam kasus saya, begitulah cara kerjanya untuk saya.

Dalam file ModuleA.js:

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

Dalam file ModuleB:

export const state = {
    parameterInB: 'B'
 }

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

Anda perlu mengimpor ModuleA & B di index.js untuk root:

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

Dengan cara ini, parameter status dapat direferensikan silang dalam sub modul.

— us_david
sumber

-3

Anda perlu menentukan sessiondi negara bagian Anda seperti berikut, untuk mengaksesnya di getter Anda :

const state = {
  session: ''
}

Anda harus menulis mutasi , yang akan dipanggil dari tindakan Anda untuk menyetel nilai status ini.

— Saurabh
sumber

Saya memiliki semua yang Anda sebutkan di sini. Saya dapat mengakses sesi dari dalam sebuah komponen, tetapi saya tidak yakin bagaimana mengakses sesi dari dalam modul Vuex lain (yaitu catatan_view.js).

— Donnie

3

@Donnie cobacontext.rootState.instance.session

— Saurabh