Vuex 모듈 초기화 모범 사례

Vuex 모듈 초기화 모범 사례

(추가 배경 포함)

Vuex 스토어 모듈은 시작 시 데이터를 자동으로 로드해야 하므로 요청 시 사용할 수 있습니다(이 경우 시작 시 전자 설정에서 데이터를 로드하는 '설정' 스토어입니다만, 이러한 스토어가 필요한 이유는 여러 가지가 있습니다.

지금 저는 제 스토어 모듈에 특별한 'init' 액션을 설정하고 그것을 Main에서 디스패치함으로써 이것을 달성하고 있습니다.다음과 같이 '마운트된' 라이프 사이클 훅의 vue 구성 요소:

mounted() {
    this.$store.dispatch('initSettings');
}

내가 원했던 것은 모듈이 단순히 초기화할 수 있는 방법이었다.이상적으로는 내 컴포넌트의 '마운트' 후크와 비슷하지만 vuex 스토어 모듈 내에서 트리거되는 라이프 사이클 후크와 같은 것입니다.이렇게 하면 모듈 사용자가 'init'를 호출하고 인스턴스화해야 한다는 것을 알 필요가 없습니다.

저는 문서를 뒤졌지만 이에 대한 해결책을 찾지 못했습니다. 하지만 만약 제가 잘못된 것을 찾고 있다면 누군가 우아한 방법을 찾길 바랬습니다.

스토어가 다른 파일에 있는 경우store/index.jsImport만 하면 됩니다.

import store from '/store';

store.dispatch("stuff")

이는 ES6 가져오기가 참조이며 런타임 데이터 구조에 바인딩되기 때문입니다.이하와 같다import store from '/store'스테이트먼트는 첫 번째 스테이트먼트와 동일한 참조를 받습니다.

require()복사를 합니다.눈에 띄는 차이입니다.

비슷한 것이 필요했습니다.제 해결책은 문서가 로드되었을 때 실행하는 것입니다.

var app_store = new Vuex.Store({
  state: state,
  getters: getters,
  mutations: mutations,
  actions: actions,  	
});

$(document).ready(function()
{  
  app_store.dispatch("initSettings",null); 
});

언급URL : https://stackoverflow.com/questions/50612499/vuex-module-initialization-best-practice