Vuejs：在 vuejs 的计算对象中使用 get 和 set 属性会显示错误

Question

vuejs 中不允许在计算对象内声明属性（get() 和 set()）吗？

代码有效，但是 vscode 显示大量红色，请参阅屏幕截图以供参考。

我不确定是vuejs还是vscode触发了错误。

Farmer.js 组件

computed: {
        ...mapState("farmers", ["crud_step"]),
        normal_data(){ //this works
              return 'test';
        },
        step: { //this also works but this line causes an error display
            get() {
              return this.crud_step;
            },
            set(value) {
              return this.SET_CRUD_STEP(value);
            }
          },
      },

farmer.js 商店

const state = {[![enter image description here][1]][1]
  crud_step: 1,
  ...

};

const mutations = {
  SET_CRUD_STEP(state, value){
    state.crud_step = value;
  },
 ...
};

注意：eslint 已禁用

回购链接：https://github.com/juanPao/acms/blob/main/src/components/Farmers/FarmerCreate.vue

Answer 1

您的计算结果看起来不正确。首先，你不应该从setter 返回任何东西。这是一个动作。 getter 必须返回一个值。

而你想要 setter 到 commit 的突变。所以你的代码可能看起来像：

computed: {
  ...mapState("farmers", ["crud_step"]),
  step: {
    get() {
      return this.crud_step;
    },
    set(value) {
      this.$store.commit('farmers/SET_CRUD_STEP', value);
    }
  }
}

...，这表明您实际上并不需要两个本地道具（crud_step 和 step），您可以简单地将商店的 crud_step 映射到本地 step：

computed: {
  step: {
    get() {
      return this.$store.state.farmers.crud_step;
    },
    set(value) {
      this.$store.commit('farmers/SET_CRUD_STEP', value);
    }
  }
}

为了保持一致性，我实际上将本地属性命名为crud_step（这意味着您还必须在<template> 中更改它）。从长远来看，坚持一致和干净的命名模式（无论您使用的是什么）都会提高您在编码和调试方面的效率。

---

由于您没有显示组件中的所有代码，我猜您没有提交突变的名为SET_CRUD_STEP 的方法。即使你这样做，也没有必要。您可以简单地从setter 提交。如果您在组件的其他地方使用了该方法，请将其替换为 this.step = someValue（它调用 setter - 这就是 setter 的含义：当您为该属性分配某些内容时调用的函数）。