Pass vuex state to component via props and change state value using v-model or event

Question

I have a module how renders a component and pass the state of vuex via props to the component, so far so good, but I'm binding the props in a checkbox list and I'm trying to change its value, however Vuex returns me an error telling me not to mutate the store data without a mutation, with code I think is more easy to understand.

Module

<template>
  <div>
    <modal :visible="modalIsVisible"
      :data="rules"
      v-on:openModal="openModal"
      v-on:submitRules="submitRules">
    </modal>
  <div>
</template>

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

import Modal from './modal/modal.vue';

export default {
  name: 'Module',
  components: {
    Modal,
  },
  data() {
    return {
      modalIsVisible: false
    };
  },
  computed: 
    ...mapState({
      rules(state, getters) {
        return getters['module/rules'];
      },
    }),
  },
  methods: {
    loadRules() {
      this.$store.dispatch('module/getRules');
    },
    async openModal() {
      if (!this.modalIsVisible) {
        await this.loadRules(typeRules);
      }
      this.modalIsVisible = !this.modalIsVisible;
    },
  }
}

</script>

ModalRules

<template>
    <div>
      <modal :visible.sync="visible">
          <div slot="content">
            <div v-for="group in data" :key="group.name"
               class="neo-form-group">
              <h1 class="policy__title-group--text" v-text="group.name"></h1>
              <div class="neo-form-toggle-list neo-form-toggle-list--inline">
                <div v-for="rule in group.rule" :key="group.title"
                     class="neo-form-toggle-list__item neo-form-toggle neo-form-toggle--checkbox">
                  <input class="neo-form-toggle__field" :id="rule.title" v-model="rule.checked" name="rule"
                     type="checkbox"/>
                  <label class="neo-form-toggle__label" :for="rule.title">
                    {{ rule.title }}
                  </label>
                  <h6 class="neo-text-disabled-options">{{ rule.description }}</h6>
                </div>
              </div>
            </div>
        </div>
      </modal>
    </div>
</template>

<script>
import modal from '@/components/shared/modal/Modal.vue';

export default {
  name: 'ModalRules',
  props: {
    visible: Boolean,
    data: Array,
  },
  components: {
    Modal,
  },
  methods: {
    updateValue(e) {
        //I don't know how to update the property checked of rule    
    },
    setRules() {
      this.$emit('submitRules', { checked: this.data });
    },
    closeModal() {
      this.$emit('openModal');
    },
  }
}

</script>

Action

import { rulesService } from '../../../../services/api/graphql/modules/rules';

export default {
  getRules: async ({ commit }) => {
    const payload = await rulesService.getRules().then(res => res.data.rules);
    commit('setRules', payload);
  },
};

Mutation

export default {
  setRules: (state, payload) => {
    state.rules = payload;
  },
};

Getters

export default {
  rules: state => state.rules,
};

State

export default {
  rules: [],
};

JSON Mock

[
  {
    "type": "rules",
    "group": [
      {
        "name": "RuleGroup1",
        "rule": [
          {
            "id": 1,
            "title": "Rule 1",
            "description": "Rule description 1",
            "homonym": false,
            "criticality": "high",
            "checked": false
          },
          {
            "id": 2,
            "title": "Rule 2",
            "description": "Rule description 2",
            "homonym": false,
            "criticality": "high",
            "checked": false
          }
        ]
      },
      {
        "name": "RuleGroup2",
        "rule": [
          {
            "id": 6,
            "title": "Rule 3",
            "description": "Rule description 3",
            "homonym": false,
            "criticality": "high",
            "checked": false
          },
          {
            "id": 7,
            "title": "Rule 4",
            "description": "Rule description 4",
            "homonym": false,
            "criticality": "medium",
            "checked": false
          }
        ]
      },
      {
        "name": "RuleGroup3",
        "rule": [
          {
            "id": 8,
            "title": "Rule 5",
            "description": "Rule description 5",
            "homonym": false,
            "criticality": "high",
            "checked": false
          }
        ]
      },
      {
        "name": "RuleGroup4",
        "rule": [
          {
            "id": 9,
            "title": "Rule 6",
            "description": "Rule description 6.",
            "homonym": false,
            "criticality": "medium",
            "checked": false
          }
        ]
      }
    ]
  }
]

Interface

I don't know how to mutate my checkbox state with vuex good practices, this way I'm doing vuex returns me a error.

Error

Error: [vuex] do not mutate vuex store state outside mutation handlers.

And also I intend to keep my component without access to the store, keeping it as a dummy component, with all the responsibility of state change with the Module,

Any help? Thanks!

Answer 1

To reflect the updated checkbox change in the store, you need to have an update_rule function in the store that will take care of updating the rule inside the rules array, as below:

Store:

  mutations:
    {
      UPDATE_RULE(state, payload) // payload will hold the rule id and updated value
      {
        // payload is {id: 2, value: false} 
        state.rules.forEach(function(element){     
          if(element.rule.filter(item => item.id == payload['id')).length >0)
          {
            element.rules.filter(item => item.id == payload['id'])[0]['checked'] = payload['value']
          }      
        })

      }
    }

    ...
     actions: 
    {
      update_rule(context, payload) {
        context.commit('UPDATE_RULE', payload)
      },

    }

Component:

<div v-for="rule in group.rule" :key="group.title" >
    <input :id="rule.title" v-model="rule.checked" name="rule" v- 
            on:change="update_rule_val(rule.id, $event.target.value)" 
            type="checkbox"/>
                  <label :for="rule.title">
                    {{ rule.title }}
                  </label>
                  <h6>{{ rule.description }}</h6>
                </div>

...
methods: {
    update_rule_val(id,val){
      this.update_rule({id: id, value: val})
    },
    ...mapActions(["update_rule"]),