Vuex - 어떤 데이터가 스토어를 통해 전송되어야 합니까?

Vuex - 어떤 데이터가 스토어를 통해 전송되어야 합니까?

Vuex의 용도와 스토어의 용도는 알고 있습니다만, 지금 저는 다음과 같이 생각하고 있습니다.

"가게에 실제로 뭘 넣어야 하죠?"

제가 만들고 있는 SPA는 많은 데이터를 처리합니다.처음에는 '메인'만 넣었어요.하지만 그게 잘못된 건가요?이 경우,store실제로 SPA의 모든 데이터를 보유하고 있습니까?제가 웹페이지에 데이터를 표시한다면, 그것이 웹페이지에 흘러들어갈까요?store?

일반적으로 데이터는 컴포넌트 중 하나에 의해서만 사용되는지, 아니면 하위 컴포넌트에게 전달되는 한 가지 방법인지, 컴포넌트 레벨에서 사용할 수 있습니다.

단, 3개 이상의 컴포넌트에 의해 데이터가 변경 및 액세스되는 경우 vuex라는 중앙 집중식 상태가 될 수 있습니다.

문서로부터의 인용:

중대규모 SPA를 구축하고 있는 경우 Vue 컴포넌트 이외의 상태를 보다 효과적으로 처리할 수 있는 방법을 고민하게 될 가능성이 있습니다.Vuex는 자연스러운 다음 단계입니다.Redux의 저자인 Dan Abramov의 명언은 다음과 같습니다.

플럭스 라이브러리는 안경과 같아서 필요할 때 알 수 있습니다.

또한 vue-hackernews의 예를 참조할 수 있습니다.이 예에서는 사용자는 vuex 스토어에 있는 반면 컴포넌트는 해당 컴포넌트에만 고유하며 데이터는 가지고 있습니다.

컴포넌트의 데이터:

  data () {
    const data = {
      loading: false,
      transition: 'slide-up',
      displayedPage: isInitialRender ? Number(this.$store.state.route.params.page) || 1 : -1,
      displayedItems: isInitialRender ? this.$store.getters.activeItems : []
    }
    isInitialRender = false
    return data
  },

상태(vuex):

  state: {
    activeType: null,
    itemsPerPage: 20,
    items: {/* [id: number]: Item */},
    users: {/* [id: string]: User */},
    lists: {
      top: [/* number */],
      new: [],
      show: [],
      ask: [],
      job: []
    }
  },

언급URL : https://stackoverflow.com/questions/43452979/vuex-what-data-should-be-flowing-through-the-store