Changing a store state value from a component

Question

I have a table that contains objects defined in the store. In the component where i display the table, i can click on the table rows to gain more information about the contents of this specific row. What i want to do is, when i select a row, to be able to change a value in the state from false to true in order to populate another table with the contents of just the selected row. Here's some code:

store.js

const state = {
selectedLimitCard: {},
limitCards: [
{ limitCardSelectedStatus: false }
]}

const mutations = {
  selectLimitCard: state => {
    state.limitCards.forEach(limitCard => {
      if (limitCard.limitCardSelectedStatus == true) {
        state.selectedLimitCard = limitCard;
      }
    });
  }
};

const actions = {
  selectLimitCard: ({ commit }) => {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        console.log(
          "!Store! value: " + state.limitCards[0].limitCardSelectedStatus
        );
        commit("selectLimitCard", state.selectedLimitCard);
        resolve();
      }, 2000);
    });
  }
};

const getters = {
  getLimitCards: state => {
    return state.limitCards;
  },
  getSelectedLimitCard: state => {
    return state.selectedLimitCard;
  }
};

component.vue

       <v-btn
          id="nextStep"
          color="#009af9"
          large
          dark
          @click="
          modifySelectedLimitCardStatus(),
          selectLimitCard"
        >Select</v-btn>

  data: () => ({
    editedLimitCard: {
      limitCardSelectedStatus: ""
    }
  }),
  computed: {
    ...mapGetters(["getLimitCards"]),
    ...mapActions(["selectLimitCard"])
  },

  methods: {
    modifySelectedLimitCardStatus() {
      this.editedLimitCard.limitCardSelectedStatus = true;
      this.$store.state.limitCardSelectedStatus = this.editedLimitCard.limitCardSelectedStatus;
      console.log(
        "This is the edited item: " +
          this.editedLimitCard.limitCardSelectedStatus +
          "\nThis is the store value: " +
          this.$store.state.limitCardSelectedStatus
      );
    }
  }

So far, when i'm logging the values in the component, everything is fine, but the value in the store's state remains unchanged. I'm trying to change the values in the component because that's where i have acess to the logic which row is selected. Can someone point me in the right direction what i'm doing wrong?

Is your action triggered? Try to prevent changing the Vuex state directly... — Simon Thiel
– Simon Thiel, Commented Jul 18, 2019 at 11:50
@SimonThiel Yes, the action is triggered on the button click iliustrated above. — Pok3r Princ3
– Pok3r Princ3, Commented Jul 18, 2019 at 12:00
commit("selectLimitCard", state.selectedLimitCard); the second parameter is not used by the mutation selectLimitCard — Simon Thiel
– Simon Thiel, Commented Jul 18, 2019 at 12:07

Cyril Graze · Accepted Answer · 2019-07-18 12:09:25Z

1

In modifySelectedLimitCardStatus(), the Vuex state is being modified directly:

this.$store.state.limitCardSelectedStatus = this.editedLimitCard.limitCardSelectedStatus;

According to https://vuex.vuejs.org/guide/mutations.html:

The only way to actually change state in a Vuex store is by committing a mutation.

answered Jul 18, 2019 at 12:09

Cyril Graze

3,8972 gold badges24 silver badges27 bronze badges

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

2 Comments

Pok3r Princ3 Over a year ago

So if i understand you correctly, i have to figure out a way to determine which item is currently selected, and then run a mutation directly in the store to modify the state? It can't be done in the component?

Cyril Graze Over a year ago

Only special functions, known as "mutations" are allowed to modify any values saved inside the Vuex state. The mutation methods, are defined inside Vuex. They are called from components by using commit. If you try to modify Vuex state data in any other way, other than a mutation, it will not work.

Collectives™ on Stack Overflow

Changing a store state value from a component

1 Answer 1

2 Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Related