Vuex无法访问Getter获取数组：返回函数而非值的问题求助

核心错误点 #

1. 组合式函数中brands定义错误：你把brands写成了返回computed的箭头函数，导致组件拿到的brands是函数，而非计算属性实例。
2. computed用法错误：直接传入store.getters['quoter/getterBrands']无法触发响应式监听，computed需要接收工厂函数来追踪依赖变化。
3. 异步Action未等待：getBrands是异步dispatch操作，直接打印会出现数据还未更新到state的情况。

修正后的代码 #

组合式函数useQuoter

import { computed } from 'vue';
import { useStore } from 'vuex';

const useQuoter = () => {
    const store = useStore()
    // 用工厂函数包裹getter调用，创建响应式计算属性
    const brands = computed(() => store.getters['quoter/getterBrands'])
    return {
        getBrands: () => store.dispatch('quoter/getBrands'),
        brands // 直接返回计算属性实例，而非函数
    }
}

export default useQuoter

组件调用代码

const { getBrands, brands} = useQuoter()
onMounted (async () => {
  await getBrands() // 等待异步Action执行完成，确保state已更新
  console.log(brands.value); // 访问计算属性的value属性获取实际数组
})

说明 #

• 修正后brands是Vue的计算属性实例，组件可通过brands.value访问最新数组值，且会自动响应state的变化。
• await getBrands()确保打印数据前，异步Action已完成并更新了state中的brands数组。

内容的提问来源于stack exchange，提问作者alain_maza