具有来自计算的动态输入的 v-model

Question

所以当我需要在网站中生成动态表单时，我有一个用例。 我正在使用v-for迭代我的表单和v-model的计算属性，在 Vue 文档中声明使用get()或set()是要走的路，但我收到一条错误消息

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

这是我的代码：

商店.js

function dynamic() {
  return {
    ini: 12
  };
}

export const state = () => ({
  message: []
});

export const mutations = {
  setMessage(state, value) {
    console.log(value);
    state.message = value;
  },
  setDynamic(state, value) {
    let arr = [];
    for (let i = 0; i < 2; i++) {
      arr.push(dynamic());
    }
    state.message = arr;
  }
};

组件.vue

<template>
  <section>
    <div v-for="(item, index) in message" :key="index">
      <input placeholder="Hallo V-Model" v-model="message[index].ini">
    </div>
  </section>
</template>

<script>
import { mapMutations } from "vuex";

export default {
  computed: {
    message: {
      get() {
        return this.$store.state.messages.message;
      },
      set(value) {
        this.$store.commit("messages/setMessage", value);
      }
    }
  },
  methods: {
    ...mapMutations({
      dynamic: "messages/setDynamic"
    })
  },

  beforeMount() {
    this.dynamic();
  }
};
</script>

可以在我的代码和框中找到更多交互性，你知道它为什么会抛出错误吗？ 以及如何解决这个问题？

更新

设法通过将“strich 模式”设置为 false 来修复它，但是，我仍然不知道我在哪里改变了突变之外的状态。 还需要回答

Answer 1

我使用vuex-maps-fields作为快捷方式，它们提供了更高级别的get()和set() whitin vuejs，因此您可以将v-model with them

我改变了messages上的对象，所以我需要在应用新值之前克隆它。 这里库是如何做到这一点的，它不会在mutations之外改变你的状态https://github.com/maoberlehner/vuex-map-fields/blob/8ce9a2751be7996214c0c68c25afa2f2ef5b7446/src/index.js#L61