如何在 Composition API (Vue 3) 中观看 Vuex getter答案

【问题标题】：How to watch a Vuex getter in Composition API (Vue 3)如何在 Composition API (Vue 3) 中观看 Vuex getter
【发布时间】：2021-09-26 22:26:08
【问题描述】：

我的应用程序的状态似乎在我的组件加载后加载，所以我的想法是注意状态获取器。但是如何在组合 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

【问题讨论】：

标签： javascript vuex vuejs3 vue-composition-api

【解决方案1】：

在这种情况下使用ref 是不正确的，因为AFAIK 变量ref 的值是在您分配时设置的，并且只有在您重新分配其值时才会更改。例如：

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

要在存储中的数据准备好（更改）时重新计算您的公司数组，您需要改用computed。

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

您可以使用手表进行验证或在视图中查看更新。

【讨论】：

稍后会看看。到目前为止感谢