如何在 Composition API (Vue 3) 中觀看 Vuex getter

Question

我的應用程序的狀態似乎在我的組件加載后加載，所以我的想法是注意狀態獲取器。 但是如何在組合 API 中查看 Vuex getter 呢？

我的狀態和吸氣劑：

state: () => ({
    companies: [],
  }),
  getters: {
    getAvailableCompanies(state) {
      return state.companies
    }
  },
  [...]
}

在我的模塊中，我導入商店：

import { store } from '@/store/store.js'

並在我的組件的 setup() 函數中獲取 getter 的值：

const companies = ref(store.getters["companies/getAvailableCompanies"])
console.log("companies", companies)

現在我正在嘗試觀察變化（也在 setup() 中），一旦狀態被填充：

watch(
  companies, (curr, old) => {
    console.log(curr, old)
  }
)

不幸的是， companies.value永遠不會改變並且保持undefined

Answer 1

在這種情況下使用ref是不正確的，因為 AFAIK ref變量的值是在您分配時設置的，並且僅在您重新分配其值時才更改。 例如：

const companies = ref(store.getters["companies/getAvailableCompanies"]);
companies.value = [];

要在商店中的數據准備好（更改）時重新計算您的公司數組，您需要改用computed 。

const companies = computed(() => store.getters["companies/getAvailableCompanies"]);

您可以使用手表進行驗證或在視圖中查看更新。