更新

Question

因此，当我需要在网站中生成动态表单时，我有一个用例。我正在使用v-for在表单上进行迭代，在计算属性上使用v-model进行迭代，在Vue文档中，声明使用get()或set()是可行的方法，但是我收到错误消息

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

这是我的代码：

store.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;
  }
};

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

在我的codesandbox上可以找到更多的互动式工具，您知道为什么会引发错误吗？以及如何解决此问题？

更新

设法通过将'strich mode'设置为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

之外改变您的状态

具有动态输入的v模型

更新

1 个答案: