通过 props 将 vuex 状态传递给组件，并使用 v-model 或 event 更改状态值

Question

我有一个模块如何渲染组件并通过 props 将 vuex 的状态传递给组件，到目前为止一切顺利，但我将道具绑定在复选框列表中，我试图改变它的值，但是 Vuex 给我一个错误，告诉我不要在没有突变的情况下改变存储数据，我认为代码更容易理解。

模块

<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>

模态规则

<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>

动作

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);
  },
};

变异

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

吸气剂

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

州

export default {
  rules: [],
};

JSON 模拟

[
  {
    "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
          }
        ]
      }
    ]
  }
]

界面

我不知道如何使用 vuex 的良好实践来改变我的复选框状态，这样我正在做 vuex 会返回一个错误。

错误

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

而且我还打算让我的组件无法访问商店，将其保留为虚拟组件，并承担模块状态更改的所有责任，

有什么帮助吗？谢谢！

Answer 1

要在商店中反映更新后的复选框更改，您需要在商店中有一个 update_rule 函数来负责更新规则数组中的规则，如下所示：

商店：

  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)
      },

    }

组件：

<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"]),