Vue 中未调用计算属性集

Question

根据文档v-model，只要我定义了 get/set 方法，我就应该能够像在 Vue 中一样使用计算属性，但在我的情况下，它不起作用：

export default{

    template: `
      <form class="add-upload" @submit.prevent="return false">
        <label><input type="checkbox" v-model="options.test" /> test </label>
      </form>
    `,

    computed: {

      options: {

        get(){
          console.log('get');
          return {test: false};
        },

        set(value){
          console.log('set');
        },

      },

    }

}

set当我检查/取消选中输入时，显然没有被调用。但是get在显示组件时调用...

Answer 1

编辑：在阅读了您依赖本地存储的评论后，我只能建议您采用 Vuex 方法并使用持久性库来处理本地存储。( https://www.npmjs.com/package/vuex-persist ) 这样，你的本地存储将始终链接到你的应用程序，你不必每次都搞乱 getItem/setItem 。

看看您的方法，我认为您有理由使用计算属性而不是数据属性。

发生问题的原因是您的计算属性返回一个除了在get处理程序中之外别处定义的对象。无论您尝试什么，您都将无法在set处理程序中操作该对象。

和必须链接到一个公共引用get。set正如许多人所建议的那样，数据属性或应用程序中的事实来源（Vuex 实例就是一个很好的例子）。

这样，您将可以完美地与计算属性的处理程序v-model一起工作。set

这是一个演示解释的工作小提琴：

使用 Vuex

const store = new Vuex.Store({
  state: {
    // your options object is predefined in the store so Vue knows about its structure already
    options: {
      isChecked: false
    }
  },
  mutations: {
    // the mutation handler assigning the new value
    setIsCheck(state, payload) {
      state.options.isChecked = payload;
    }
  }
});

new Vue({
  store: store,
  el: "#app",
  computed: {
    options: {
      get() {
        // Here we return the options object as depicted in your snippet
        return this.$store.state.options;
      },
      set(checked) {
        // Here we use the checked property returned by the input and we commit a Vuex mutation which will mutate the state
        this.$store.commit("setIsCheck", checked);
      }
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

<div id="app">
  <h2>isChecked: {{ options.isChecked }}</h2>
  <input type="checkbox" v-model="options.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>
<script src="https://unpkg.com/vuex@2.0.0"></script>

具有数据属性

new Vue({
  el: "#app",
  data: {
    options: {
      isChecked: false
    }
  },
  computed: {
    computedOptions: {
      get() {
        return this.options;
      },
      set(checked) {
        this.options.isChecked = checked;
      }
    }
  }
})

body {
  background: #20262E;
  padding: 20px;
  font-family: Helvetica;
}

#app {
  background: #fff;
  border-radius: 4px;
  padding: 20px;
  transition: all 0.2s;
}

h2 {
  font-weight: bold;
  margin-bottom: 15px;
}

<div id="app">
  <h2>isChecked: {{ computedOptions.isChecked }}</h2>
  <input type="checkbox" v-model="computedOptions.isChecked" />
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.5.17/vue.js"></script>

恕我直言，你的方法有点特别，但是，你必须有你这样做的理由。

Answer 2

我不知道是否有一个计算集方法可以在这里工作，但是还有一些其他方法可以解决这个问题。

如果您想要一个单一的 getter 来改变数据，您可以使用基于事件的方法来设置数据。这个方法是我最喜欢的：

export default {
  template: `
      <form class="add-upload" @submit.prevent="">
        <label for="test"> test </label>
        {{options.test}}
        <input id="test" type="checkbox" v-model="options.test" @input="setOptions({test: !options.test})"/>
      </form>
    `,
  data() {
    return {
      optionsData: {
        test: false
      }
    }
  },
  computed: {
    options: {
      get() {
        return this.optionsData;
      },
    },
  },
  methods: {
    setOptions(options) {
      this.$set(this, "optionsData", { ...this.optionsData, ...options })
    }
  }
}

如果您实际上没有在 get/set 中执行任何操作，则可以仅使用 data 选项

export default {
  template: `
      <form class="add-upload" @submit.prevent="">
        <label for="test"> test </label>
        {{options.test}}
        <input id="test" type="checkbox" v-model="options.test" />
      </form>
    `,
  data() {
    return {
      options: {
        test: false
      }
    }
  }
}

然后还有每个属性的获取/设置选项

export default {
  template: `
      <form class="add-upload" @submit.prevent="">
        <label for="test"> test </label>
        {{test}}
        <input id="test" type="checkbox" v-model="test" />
      </form>
    `,
  data() {
    return {
      optionsData: {
        test: false
      }
    }
  },
  computed: {
    test: {
      get() {
        return this.optionsData.test;
      },
      set(value) {
        this.optionsData.test = value
      }
    },
  },
}