javascript - 动态选项的计算 getter 和 setter

Question

我将 Vuex 与我的 Vue 组件一起使用。当我的组件具有可编辑的静态字段时，可以使用计算属性轻松处理它们:

computed: {
  text: {
    get() {
      return ...
    },
    set(value) {
      this.$store.commit...
    },
  },
},

<input type="text" v-model="text">

但是，当我渲染一个需要绑定(bind)的选项列表时，应该怎么做呢？

options = [
  {
    value: ...,
    text: ...,
  },
  {
    value: ...,
    text: ...,
  },
  ...
];

<input type="text" v-model="option.text" v-for="option in options">

Answer 1

您必须为选项定义突变，例如“addOption”、“editOption”等...

可选择(但推荐)定义一个选项组件。绑定(bind)事件以调用突变。

此处提供了 vuex 提供的一个很好的简单示例: https://github.com/vuejs/vuex/tree/dev/examples/todomvc

特别看一下 todo 组件。它负责待办事项列表中的单个项目。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/components/Todo.vue

以及它们如何与应用程序组件中的列表一起使用。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/components/App.vue

这些是他们的突变。查看他们如何编辑以及添加和删除列表项。 https://github.com/vuejs/vuex/blob/dev/examples/todomvc/store/mutations.js

我没有更短的答案，转向 vuex(vue + redux 方法论)需要思维和架构的转变。