VueX dispatch action doesnt work, no error displayed in console VueJs

Question

I'm trying to use an action to call method with boolean value using the store

In the store app.js, i've defined :

export default {
  namespaced: true,
    state: () => {
        return {
          isScrollDisabled: true,
        }
    },
    mutations: {
        setScrollDisabled(state, value) {
          state.isScrollDisabled = value
    },
    actions: {
        setScrollDisabled(context, value) {
          console.log('Action called in store')
          context.commit('setScrollDisabled', value)
    },
    getters: {
        getScrollDisabled: state => state.isScrollDisabled,
    }

,

In the component, i dispatch the action like this :

this.$store.dispatch('app/setScrollDisabled', false) // with true or false

And in other component, i use the store getter to retrieve the value :

computed: {
    isDisabled() {
      return this.$store.getters.getScrollDisabled
},

I see nothing in the console and also in the VueJs Chrome extension, there are no event displayed

What i forgot here ?

The question doesn't say it's a module, but action name suggests this. You can't expect it to be available as store.getters.getScrollDisabled if it's namespaced — Estus Flask
– Estus Flask, Commented Feb 10, 2022 at 10:12
@Estus Maybe i've not understand well your answer, what i mean here is the setScrollDisabled isnt called when i dispatch — Tchiko
– Tchiko, Commented Feb 10, 2022 at 10:21
Please, provide stackoverflow.com/help/mcve for your problem. It's unclear how you define the store. If there's app namespace module, you need to use the namespace in both action and getter. If it's not a module, you don't need to use app at all — Estus Flask
– Estus Flask, Commented Feb 10, 2022 at 10:27
Are other events shown in Vue devtools? If they aren't, this could be devtools problem, i.e. you use the action correctly but not getter. — Estus Flask
– Estus Flask, Commented Feb 10, 2022 at 10:44

Deiby Rodriguez · Accepted Answer · 2022-02-10 20:24:37Z

1

More friendly and easy

    computed: {
      ...mapGetters('app', [
        'getScrollDisabled'
      ])
    },
    methods: {
      ...mapActions('app', [
        'setScrollDisabled'
      ])
    }

answered Feb 10, 2022 at 20:24

Deiby Rodriguez

433 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueX dispatch action doesnt work, no error displayed in console VueJs

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related