title: Changing a store state value from a component
body: <p>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:</p>
  
  <p>store.js</p>
  
  <pre><code>const state = {
  selectedLimitCard: {},
  limitCards: [
  { limitCardSelectedStatus: false }
  ]}
  
  const mutations = {
    selectLimitCard: state =&gt; {
      state.limitCards.forEach(limitCard =&gt; {
        if (limitCard.limitCardSelectedStatus == true) {
          state.selectedLimitCard = limitCard;
        }
      });
    }
  };
  
  const actions = {
    selectLimitCard: ({ commit }) =&gt; {
      return new Promise((resolve, reject) =&gt; {
        setTimeout(() =&gt; {
          console.log(
            "!Store! value: " + state.limitCards[0].limitCardSelectedStatus
          );
          commit("selectLimitCard", state.selectedLimitCard);
          resolve();
        }, 2000);
      });
    }
  };
  
  const getters = {
    getLimitCards: state =&gt; {
      return state.limitCards;
    },
    getSelectedLimitCard: state =&gt; {
      return state.selectedLimitCard;
    }
  };
  
  component.vue
  
         &lt;v-btn
            id="nextStep"
            color="#009af9"
            large
            dark
            @click="
            modifySelectedLimitCardStatus(),
            selectLimitCard"
          &gt;Select&lt;/v-btn&gt;
  
    data: () =&gt; ({
      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
        );
      }
    }
  </code></pre>
  
  <p>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?</p>