Vuex - what data should be flowing through the store? Vuex - what data should be flowing through the store? vue.js vue.js

Vuex - what data should be flowing through the store?


As a rule of thumb, is the data is only used by one of the component, or it is one way propagated to child, you should be okay with having that at component level.

But if data is changed and accessed by more than two components it can be put in centralised state: that is vuex.

Quoting from the docs:

if you are building a medium-to-large-scale SPA, chances are you have run into situations that make you think about how to better handle state outside of your Vue components, and Vuex will be the natural next step for you. There's a good quote from Dan Abramov, the author of Redux:

Flux libraries are like glasses: you’ll know when you need them.

You can also refer vue-hackernews example, where you can see lists, users are in vuex store, while components also have data while are specific to only that component.

data in component:

  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  },

state in vuex:

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