Voie + Vuex

[jonagoldman]

I'm trying to use Voie with Vuex, but I 'm stuck. Maybe you can give me a hint on this one. I'm basically taking your demo app and Vuex examples and trying to make them work together.

You suggest loading the state data in the enter method like this:

/// index.js
enter: (ctx) => UsersService.findAll().then(users => {
    ctx.data.users = users;
})

But Vuex pattern goes something like this (inside a component, using computed data and the created method):

// users.vue
import store from '../store'
const { getAllUsers } = store.actions

export default {
  computed: {
    users () {
      return store.state.users
    }
  },
  created () {
    getAllUsers()
  }
}

I can get it to work by not using the enter method of the state and loading the data inside the component, but not sure thats the correct way and if theres any caveats in that.

[inca]

Frankly that was the main reason I created Voie: I was unsatisfied with component being rendered before its data is available (that's the main thing that sets Voie apart from vue-router).

However, Voie covers cases when you don't need to wait for data — just don't use enter hooks! You can still access parameters (e.g. matched from pathname) by using this.$options.params inside Vue component in case you need them. created, attached, detached and everything else will work as expected upon transition.

Note that this is not considered "bad" or "non-voie-way" :D You just need to understand that the difference is in responsibility: in case of omitting enter and fetching data in component (we should really have a term for this approach) you may end up with uninitialized data after the component has been rendered. This uninitialized data can cause several potential problems:

• Vue spitting out warnings/errors (e.g. if you try to access users.length before it's initialized)
• if you pre-initialize your users with empty array, then (depending on template's logic) you may briefly see "Sorry, no users found." — then immediately the list of users once data becomes ready
• you can't solve previous problem without introducing a flag or workaround of sorts
• most importantly, you may want UsersList component to mind its own business: handling lists of users, not coping with data readiness and "Please wait..." screens

K, that was just few thoughts — the actual decision is all yours :)

[jonagoldman]

I ended up loading the data inside the component (we really should have a term for that approach), and as you said there are some big problems with this approach:

1) Need to check everywhere if the data is available. 2) The component is relying on some parameter from this.$options.params which is ugly and doesn't seems right.

Using the params in the enter method to get the relevant data first, and pass it to the component seems the only correct approach for my use case. The component should not rely on some external parameter, I should be able to pass data to the component from another sources too.

I will try to find a way to use Vuex actions inside the enter method.

PS: Really liking Voie so far! Keep the great work!

[inca]

@jonagoldman Thanks for your kind words!

Now, about this.$options.params — I figured this would be a part of contract between Voie and rendered component, actually all the stuff is available via $options (that's standard Vue feature). So feel free to use it in case your component does rely on external parameter — I just doubt to say whether it's good or not.

I'll add $options thingy to the docs later ;)

[jonagoldman]

:+1:

I realized that inside the enter method I can call a Vuex action that returns a promise.

Anyways I close this issue and continue it on https://github.com/vuejs/vuex/issues/26 as its more related to the store pattern of Vuex. Maybe I will post an example there if someone is reading this...