Vuex의 한 모듈에서 다른 모듈 상태 변경

Vuex의 한 모듈에서 다른 모듈 상태 변경

나는 내 vuex 상점에 두 개의 모듈을 가지고 있다.

var store = new Vuex.Store({
    modules: {
        loading: loading 
        posts: posts
    }
});

모듈에서loading, 나는 재산을 가지고 있다.saving어느 쪽이든 설정할 수 있는true또는false그리고 또한 변이함수라는 이름을 가지고 있다.TOGGLE_SAVING이 재산을 설정하기 위해서.

모듈에서posts게시물을 가져오기 전과 후에 속성을 변경하고 싶다.saving나는 전화해서 하고 있다.commit('TOGGLE_SAVING')의 행동 중 하나에서.posts모듈

var getPosts = function (context) {
    contex.commit(TOGGLE_LOADING);
};

커밋하려고 할 때 콘솔에 다음 오류가 발생함

[vuex] unknown local mutation type: TOGGLE_LOADING, global type: posts/TOGGLE_LOADING 

다음을 사용하여 다른 모듈에서 상태를 변경하는 방법commit?

여기에 제시된 매개 변수를 사용하여 사용해 보십시오.

commit('TOGGLE_LOADING', null, { root: true })

있다면namespacedtrue로 설정(Module mode에서 기본값인 Nuxt에서) 이것은 다음과 같이 된다.

commit('loading/TOGGLE_LOADING', null, { root: true })

당신은 다른 모듈에서 정의된 돌연변이를 커밋하기 위해 행동을 사용할 수 있고, 그러면 당신은 다른 모듈에서 상태를 수정할 것이다.

다음과 같은 경우:

posts: {
  actions: {
    toggleSavingActions(context) {
      // some actions 
      context.commit("TOGGLE_SAVING"); // defined in loading module
    }
  }
}

보통 어떤 js 파일에서도처럼 스토어를 가져와 사용할 수 있다.예를 들어:

// src/state/modules/posts.js

import store from '@/state/store'
...
store.commit('posts/TOGGLE_LOADING')
...

이것은 꽤 잘 작동하는데, 유일한 단점은 시험이나 모의고사를 분리하는 것이 어렵다는 것이다.

---

에디션:최근에 나는 시험 문제로 인해 내가 언급한 기술을 사용하여 모든 코드를 삭제했다.실제로 이 예에서와 같이 권장되는 방법에 따라 항상 다른 모듈의 상태를 변경할 수 있다.고유 모듈에서 인증 및 프로필을 관리하는 경우 매우 유용함.

logout: context => {
  return new Promise((resolve) => {
    // Clear token in all axios requests
    axios.defaults.headers.common['Authorization'] = ''
    // Logout from firebase
    firebase
      .auth()
      .signOut()
      .then(() => {
        // Update state in profile module
        context.commit('profile/SET_USER', null, {
          root: true
        })
        resolve()
      })
      .catch(error => reject(error))
  })
}

모듈에서 사용한 경우 다음과 같은 두 가지 방법이 있다.

1- 추가해야 한다.{ root: true }:

commit('TOGGLE_LOADING', null, { root: true }) 

2(예를 들어 globalToggleLoading)아래와 같고 네가 원하는 모듈의 그것을 사용하여 세계적인 행동을 정의 내린다.dispatch('globalToggleLoading')

globalToggleLoading: {
    root: true,
    handler({ commit }) {
      commit('TOGGLE_LOADING')
    }
  }

모듈이 에 있는 경우 커밋을 호출하여 돌연변이 또는 액션을 호출할 수 있으며, 다음 명령을 전송하십시오.

commit('TOGGLE_LOADING')

참조URL: https://stackoverflow.com/questions/42606091/change-another-module-state-from-one-module-in-vuex