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

Question

我正在使用 Vue2、Vuetify、Vue 组合 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。但是 companies.vue 中的任何内容的反应性都不起作用。

Answer 1

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

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

Vue Composition API reactivity doesn't work properly

vue.js

vue-reactivity

vue-composition-api