如何访问计算状态变量？

问题描述

使用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>

解决方法

那是因为您使用的语法不正确。

您应该对此进行更改

<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类组件的更多信息，请查看此https://github.com/streamich/react-use/blob/master/docs/useClickAway.md

,

您为什么不想使用吸气剂？

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

这将转换为计算属性

,

如果使用vue-property-decorator，则所有内容都将进入扩展类。

普通Vue：

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

与打字稿相同

@Component({})

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

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

  private baz() {
    //do smth
  }
}