如何访问计算的状态变量？答案

【问题标题】：How to access computed state variable?如何访问计算的状态变量？
【发布时间】：2020-12-20 14:03:39
【问题描述】：

使用 Vue 类组件，如何获取计算变量的值？尝试使用this.bar 会报错：Property 'bar' does not exist on type 'Vue'.

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component({
    computed: {
        bar() {
            return true;
        },
    },
    methods: {
        qux() {
            // How to get the value of bar here?
            if (this.bar) {
                baz();
            }
        },
    },
})
export default class Foo extends Vue {}
</script>

【问题讨论】：

标签： vue.js vue-component vue-class-components vue-property-decorator

【解决方案1】：

那是因为你没有使用正确的语法。

你应该改变你所拥有的

<script lang="ts">
import { Vue, Component } from "vue-property-decorator";

@Component  
export default class Foo extends Vue {
  get bar(): boolean {
    return true;
  }
  qux() {
    if (this.bar) {
        baz();
    }
  }
}
</script>

有关使用 Vue 类组件的更多信息，请查看article

【讨论】：

【解决方案2】：

你为什么不想使用getter？

@Component({})
export default class Foo extends Vue {
  get bar() { return true }
}

这被转换为计算属性

【讨论】：

【解决方案3】：

如果你使用 vue-property-decorator 一切都进入扩展类。

普通 Vue：

export default {
  data(){
    return {}
  },
  computed: {
    bar() {
        return true;
    },
  },
  methods: {
    qux() {
        if (this.bar) {
            baz();
        }
    }
  }
}

Typescript 中也是这样

@Component({})

export default class Foo extends Vue {
  get bar() {
    return true;
  }

  private qux() {
    if (this.bar) {
      this.baz();
    }
  }

  private baz() {
    //do smth
  }
}

【讨论】：