0

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 ?

Tchiko
  • 133
  • 2
  • 16
  • 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 Feb 10 '22 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 Feb 10 '22 at 10:21
  • Please, provide https://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 Feb 10 '22 at 10:27
  • I've edit the post, there is app.js that contain the store – Tchiko Feb 10 '22 at 10:37
  • 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 Feb 10 '22 at 10:44
  • Possible duplicate of https://stackoverflow.com/questions/41833424/how-to-access-vuex-module-getters-and-mutations – Estus Flask Feb 10 '22 at 10:44
  • I've resolved by creating another store without a namespaced – Tchiko Feb 10 '22 at 11:51

1 Answers1

1

More friendly and easy

    computed: {
      ...mapGetters('app', [
        'getScrollDisabled'
      ])
    },
    methods: {
      ...mapActions('app', [
        'setScrollDisabled'
      ])
    }
Deiby Rodriguez
  • 43
  • 3