Question

我正在使用Vue2，Vuetify，Vue Composition API（@ vue / composition-api）我面临的问题是成分api反应性无法正常工作。

让我给你看一些代码

---- companies.vue ----

<template>
  ...
  <v-data-table
    :headers="companiesHeaders"
    :items="companies"
    :loading="loadingCompanies"
  />
  ...
</template>

<script>
...
import { useCompanies } from '@/use/companies'

export default {
  setup: (_, props) => {
    ...
    const {
      companies,
      loadingCompanies,
      getCompanies
    } = useCompanies(context)

    onMounted(getCompanies)

    return {
      ...,
      companies,
      loadingCompanies
    }
  }
}
</script>

---- @ / use / companies.ts ----

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

export const useCompanies = (context: any) => {
  const { emit, root } = context

  const companies = ref([])
  const loadingCompanies = ref(false)

  const getCompanies = async () => {
    if (loadingCompanies.value) { return }

    try {
      loadingCompanies.value = true
      companies.value = (await root.$repositories
        .companies.getCompanies()).data

      console.log(companies.value)
      // This log works properly. It logs company list once received
      // But even after this async function is finished, companies and loadingCompanies are not updated automatically
    } catch (err) {} finally {
      loadingCompanies.value = false
    }
  }

  return {
    companies,
    loadingCompanies
  }
}

我尝试同时使用ref和reactive。但是对公司内部的任何事物都没有反应性。vue不起作用。

Answer 1

我解决了这个问题。问题在于，公司变量实例是在2个地方（一个用于创建公司对话框，一个用于表）创建的，因此一个地方（创建公司对话框）的更改不会影响到另一个（表）。谢谢。

Vue Composition API反应性无法正常工作

1 个答案: