Vuex - какие данные должны проходить через магазин?

Question

Я понимаю, что такое магазин и цель Vuex, но теперь я думаю:

"Что я на самом деле положил в магазин?"

SPA, который я строю, обрабатывает много данных. Первоначально я только вставлял "основные" вещи. Однако это не так? Если store на самом деле хранить все данные для SPA? Если я представлю данные на веб-странице, должна ли она проходить через store?

Answer 1

Как правило, если данные используются только одним компонентом или это один из способов, передаваемых дочернему элементу, у вас должно получиться иметь это на уровне компонента.

Но если данные изменены и доступны более чем двум компонентам, они могут быть переведены в централизованное состояние: это vuex.

Цитирование из документов:

Если вы строите средне-крупномасштабный SPA, скорее всего, вы столкнулись с ситуациями, которые заставляют задуматься о том, как лучше обрабатывать состояние вне ваших компонентов Vue, и Vuex станет для вас естественным следующим шагом. Вот хорошая цитата Дана Абрамова, автора Redux:

Flux библиотеки похожи на очки: вы будете знать, когда они вам нужны.

Вы также можете сослаться на пример 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: []
    }
  },