여러 형제 구성 요소에서 하나의 vuex 모듈 저장소 사용

여러 형제 구성 요소에서 하나의 vuex 모듈 저장소 사용

일부 모듈을 포함한 글로벌스테이트가 1개요

이제 나는 내 페이지의 다양한 부분에 대한 vue 컴포넌트를 가지고 있다.

다 세팅해놨으니까/foo를 사용합니다.foo스토어(이 방법은 유효)그created메서드는 API에서 데이터를 로드하여 스토어에 씁니다.

이제 나는 가지고 있다/foo/bar다른 컴포넌트(비활성화)로 되어 있습니다만, 같은 스토어에 액세스 할 필요가 있습니다./foo근데 작동이 안 돼요

내가 들어가면/foo/bar/URL에는 스토어에는 아무것도 없습니다만, 로 전환하면,/foo, 그 후 로 돌아갑니다./foo/bar데이터가 스토어에 저장되어 있으며 올바르게 출력되고 있습니다.

등록해 보았습니다./foo/bar(실제로 아이가 아니라 같은 데이터를 가진 다른 페이지일 뿐) 전혀 효과가 없는 것 같았습니다.

나도 노력했어

state: {
    ...mapState([
        'foo'
    )]
}

에/foo/bar하지만 그것도 올바른 방법은 아닌 것 같다.

하기 위한 베스트 프랙티스는 무엇인가?

1. API에서 데이터를 로드하다created지정된 페이지 세트 중 하나로
2. 해당 페이지 중 하나의 데이터에 액세스한다(즉, 동일한 스토어를 공유한다).

하루 종일 해결책을 찾으려고 노력했지만 뭔가 이해가 안 가는 것 같아요.

협조해 주셔서 감사합니다:)

편집

사실, 내가 내 질문을 다시 읽는 동안, 내 모든 문제는 데이터가 로드되지 않는 것이라고 생각한다.created메서드는 호출되지 않습니다).스토어를 사용하는 모든 페이지에서 단 한 번만 이런 일이 일어나는지 확인할 수 있는 방법은 무엇입니까?api 호출을 그냥 쓸 수는 없어요created방법, 할 수 있을까?

문제를 요약하면 두 개의 다른 컴포넌트 간에 동일한 상태에 액세스할 수 없는 것처럼 보일 수 있습니다.

내가 보통 하는 일은 메서드 내의 한 컴포넌트에서 API 호출을 하는 것이다.beforeMount컴포넌트가 생성되면 데이터를 사용할 수 있게 됩니다.

또한 api를 호출한 후 상태를 업데이트하여 어디에서나 호출할 수 있도록 합니다.

가장 먼저 로딩되는 컴포넌트는 무엇입니까?

A가 B의 부모라면 A 내부에 데이터를 로드해야 합니다.그러나 A와 B가 형제자매인 경우 구성 요소 A와 B 중 하나에 먼저 액세스할 수 있으므로 데이터를 둘 다에 로드해야 합니다. 그러면 데이터를 언제 사용할 수 있는지 알 수 없습니다.그 경우, 양쪽의 컴포넌트에 데이터를 로드합니다.또한 동일한 데이터를 다시 로드할 필요가 없도록 캐시를 서버에 추가하십시오.

예를 들어 다음과 같습니다.

주

{
  data: {}
}

컴포넌트 A

export default {
  name: 'Batch',
  beforeMount() {
    this.getDataFromAPI();
  },
  methods: {
    // getDataFromAPI will store its return inside data with a mutation
    ...mapActions(['getDataFromAPI']),
    randomMethod() {
      // Now I can Use my state
      const data = this.$store.state.data;
    }
  }
};

컴포넌트 B

export default {
  name: 'Batch',
  methods: {
    randomMethodB() {
      // If component A was loaded first than component B and A is B's parent, then the state will be accessible in the same manner and it should be populated
      const data = this.$store.state.data;
    }
  }
};

행동들

const getDataFromAPI = ({ commit }) => new Promise((resolve, reject) => { 

  // Call server
  const data = await callServer();
  commit('updateMyStateWithData');
  resolve(data);

});

export default {
  getDataFromAPI
}

돌연변이

const mutations = {
  updateMyStateWithData(state, newData) {
    state.data = newData;
  }
}

export default mutations;

또 하나는 getter를 정의하는 것입니다.이 방법은 데이터를 한 번 로드하는 좋은 방법입니다.getter 내부에서는 데이터를 업데이트하여 UI에 필요한 것만 반환합니다.

도움이 됐으면 좋겠네요!

언급URL : https://stackoverflow.com/questions/49563128/using-one-vuex-module-store-in-multiple-sibling-components