0

我正在使用 Vue2、Vuetify、Vue 组合 API(@vue/composition-api) 我面临的问题是组合 api 反应性无法正常工作。

让我给你看一些代码

---- 公司.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。但是对company.vue内部的任何反应都不起作用。

4

1 回答 1

0

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

于 2020-09-09T08:50:25.403 回答