如何使用composition创建Vuetify加载按钮

Question

我正在尝试做一个简单的带有加载功能的Vuetify按钮。Vuetify预制了组件。我正在尝试转换他们提供的代码，以便与组合api一起使用。

我遇到了this的问题。

以下是Vuetify提供的功能：

<template>
  <div class="text-center">
    <v-btn
      class="ma-2"
      :loading="loading"
      :disabled="loading"
      color="secondary"
      @click="loader = 'loading'"
    >
      Accept Terms
    </v-btn>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        loader: null,
        loading: false,
      }
    },
    watch: {
      loader () {
        const l = this.loader
        this[l] = !this[l]

        setTimeout(() => (this[l] = false), 3000)

        this.loader = null
      },
    },
  }
</script>

<style>
  .custom-loader {
    animation: loader 1s infinite;
    display: flex;
  }
  @-moz-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-webkit-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @-o-keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
  @keyframes loader {
    from {
      transform: rotate(0);
    }
    to {
      transform: rotate(360deg);
    }
  }
</style>

因此，转换到组合API，这就是我所处的位置。我的watch函数显然是非常错误的。我不确定这是否是使用这个新watch的正确方式。另一个问题是当this采用这种格式时，如何处理它：

import { ref, watch } from '@vue/composition-api'

setup () {
  let loader = ref(null)
  let loading = ref(false)

  watch( () => {
    loader () {
      const l = loader.value
      this[l] = !this[l]

      setTimeout(() => (this[l] = false), 3000)

      loader.value = null
    }
  })

  return {
    loader,
    loading,
  }
}

Answer 1

对于3.x的watch方法，第一个参数应该是您想要观察的ref (或ref数组)；第二个参数是处理程序/回调，它接收新值和旧值作为其参数(如2.x $watch中的回调所示)。

例如，要设置新ref值的记录器：

watch(myRef, (newValue, oldValue) => console.log(newValue))

// or
watch(myRef, () => console.log(myRef.value))

关于this：由于loader.value引用了其他ref中的一个，您可以只创建一个目标ref的查找，以供watch回调使用。在本例中，只有一个ref (但稍后可以添加更多)：

let loading = ref(false)

const refs = {
  loading
}

watch(myRef, () => {
  console.log(refs['loading'].value)
})

总而言之，使用组合API转换后的代码将如下所示：

import { ref, watch } from '@vue/composition-api'

export default {
  setup() {
    let loader = ref(null)
    let loading = ref(false)

    const refs = {
      loading
    }
    watch(loader, () => {
      const l = loader.value
      if (!l) return

      refs[l].value = !refs[l].value

      setTimeout(() => (refs[l].value = false), 3000)

      loader.value = null
    })

    return {
      loader,
      loading
    }
  }
}

demo