VueStoreFront: Custom module: state is updated, component not

Question

I’m creating a custom module that fetches data in the “afterRegistration” hook and saves the result into the store.

The state is updated (can see the update in VueDevTools), but the component has still the default state. What I’m doing wrong?

// afterRegistration
export function afterRegistration ({Vue, config, store, isServer}) {
  store.dispatch(${KEY}/isVisible)
}

// component
export default {
  name: 'Test',
  components: { Fragment },
  props: {
   …
  },
  computed: {
    isVisible: el => el.$store.getters['myModule/simpleTest']
  }
}

In `computed` object, use `mapState` where you have to declare the state variable you need to use in your component — Billal Begueradj, Jul 14 '19 at 09:06

score 0 · Answer 1 · answered Jul 14 '19 at 20:24

0

You have lost the reactivity. Set the initial value of simpleTest in state object to whatever you like (from the context i see it's Boolean). There is no getter or setter for this field, if it's not in initial state.

answered Jul 14 '19 at 20:24

Andrew Vasylchuk

4,671
2
12
30

score 0 · Answer 2 · answered Jul 15 '19 at 09:11

Ok, I found out that I need to dispatch in an AsyncLoader

// afterRegistration
export function afterRegistration ({Vue, config, store, isServer}) {
  AsyncDataLoader.push({
   execute: ({ route, store, context }) => {
    return new Promise ((resolve, reject) => {
      store.dispatch(`${KEY}/getInlineTranslationConfig`)
        .then(() => resolve(null))
    })
  }
})

Now it works!

VueStoreFront: Custom module: state is updated, component not

2 Answers2