CODEWITHSUNDEEP
vue.jsvuex
Daemios
Daemios

Reputation: 105

Confused about Vuex modules

I'll try and lay this out as cleanly as possible:

I have a Vue component that I'm rendering called World.vue:

<template>
  <v-container>
    This is the whole world
    <v-btn @click="test()" />
  </v-container>
</template>

<script>
import { mapState, mapActions } from 'vuex';

export default {
  computed: {
    ...mapState('drawers', ['isEquipmentOpen']),
  },
  methods: {
    ...mapActions('drawers', ['test']),
  },
};
</script>

And I have a module in for the Vuex store called drawers (drawers.js):

export default {
  namespaced: true,
  state: {
    isEquipmentOpen: false,
  },
  actions: {
    test(state) {
      console.log(state.isEquipmentOpen);
      state.isEquipmentOpen = !state.isEquipmentOpen;
    },
  },
};

What I don't understand is why when test() is called, it can't access isEquipmentOpen (logs a value of undefined). How can I manipulate isEquipmentOpen?

Upvotes: 0

Views: 97

Answers (1)

Yash Sonalia
Yash Sonalia

Reputation: 398

You cannot mutate state values from actions.

  • You'll need to create a mutations property, create a setter method in it and call it in order to change the value.
  • Pass a { commit } parameter to method in actions property.

You don't need to pass the state parameter in actions methods. Make sure that the string value in the commit() is the same as the setter name.

export default {
  namespaced: true,
  state: {
    isEquipmentOpen: false,
  },
  actions: {
    test({ commit }) {
      console.log(state.isEquipmentOpen);
      
      commit("setIsEquipmentOpen");
    },
  mutations: {
    setIsEquipmentOpen: state => state.isEquipmentOpen != state.isEquipmentOpen 
  },
};

Hope you understood the answer!

Upvotes: 1

Related Questions