I'm migrating a pure Vue application to Vuex, and I'm not sure about the best way to pass data to the ponents downstream. The Vue way is to pass them as properties:

<ponent :my-prop="myProp"/>

The Vuex way seems to be accessing the store directly:

puted: {
    myProp: function() {
        return this.$store.state.myProp;
    }
}

Doesn't the Vuex way tend to couple the views (the ponents) and the data (store) layers tighter ? In the other hand passing down properties downstream can be a bit of a pain.

What is the remended way to access store data in Vuex ?

I'm migrating a pure Vue application to Vuex, and I'm not sure about the best way to pass data to the ponents downstream. The Vue way is to pass them as properties:

<ponent :my-prop="myProp"/>

The Vuex way seems to be accessing the store directly:

puted: {
    myProp: function() {
        return this.$store.state.myProp;
    }
}

Doesn't the Vuex way tend to couple the views (the ponents) and the data (store) layers tighter ? In the other hand passing down properties downstream can be a bit of a pain.

What is the remended way to access store data in Vuex ?

• javascript
• frontend
• vue.js
• vuex

3 Answers 3

Not sure of the "official" remendation, however I personally prefer using properties. This way, you decouple the ponents from the store. E.g. your ponents can be reused (in other projects, later on etc) and don't have the store as a dependency.

If the store ever changes, e.g. a new version of VueX, another best practice later on, only the parents need to change, all of your ponents will behave in the same way.

As the questions stated, fetching the data in parent, then passing it down as props can be a bit of pain. In exchange of this pain, we get a better design, imagine a situation like this: a parent ponent has several child ponents, it fetches data in itself and pass the data to children. Here we get the "pain" stated earlier, but we gain: when the data APIs change, we can edit only the parent ponent file to make it work again, the children don't need to change as long as the parent obey the interface(events and props) between them we previously defined. (easier pare to, had we made the children to fetch the data themselves)

In general, whether to adopt a design, which brings more modeling, more code, more thinking to us, depends on whether it will benefit the team considering the project's whole lifetime. Therefore those large systems often has tons of design, because they need to be maintained by many people, through years of time. But if it's a throw-away project like a script to move some files for me in my daily workflow, why not some dirty, yet working code?

Also, the child ponents we discussed, receiving props, rendering themselves, are kind of like pure functions, that is, output the same thing if input the same, however many times repeated. Just like what we like about functional programming, they are often simple in form, easy to maintain, but need some extra effort designing and first writing them, to adapt them to this impure world.

You don't need to save everything in the vuex store. You can still have ponent data, and pass them to child ponents via props.

Here is my other answer of a same question for redux:

If the state doesn't need to share with other ponents, or the state doesn't need to keep when the ponent is unmount, then you can just put it in the ponent's state.

You can think that the vuex store is the database of front-end, if you have something like product data fetched from an API, then the vuex store is the right place; if you have a dropdown ponent, which will take a isOpen prop, then the parent of that dropdown can just keep dropdownIsOpen as a ponent state.

Basically it's the same idea, you will have two kinds of ponents, container ponent and presentational ponent.

Container ponents will access the vuex store directly; presentational ponents don't need to know anything about vuex, they only receive props, so they can be reused easily.