Vue 3项目中Vuex getter始终返回空值的问题求助

问题场景 #

基于Vue 3 + Vuex的项目中，尝试通过slug从state的products数组中过滤产品，但getter始终返回空值。相关代码如下：

Store代码 #

import VueX from 'vuex'
import ProductService from '@/services/ProductService'
export default new Vuex.Store({
    state:{ products : [] },
    getters : {
        getProductFromSlug(state){
            console.log(state) // 打印显示state包含products
            console.log(state.products) // 打印显示products为空
            return state.products.filter( product => {
                return product.slug == 'my-slug'
            })
        }
    },
    actions:{
        fetchProducts(context){
            ProductService.getProducts().then( response => context.commit('setProducts', response.data) )
        }
    },
    mutations: { setProducts(state, products) { this.state.products = products } }
})

组件代码 #

... 
created() {
    store.dispatch('fetchProducts')
    console.log(store.getters.getProductFromSlug)
}

打印现象 #

• state打印结果：
• state.products打印结果：

核心问题及修复方案 #

1. Mutation中错误的state赋值方式 #

在setProducts mutation里，你用了this.state.products = products，这是错误的：

• Vuex的mutation第一个参数state就是当前的状态对象，直接修改这个参数即可，不需要通过this.state访问。
• this.state在这里指向的并不是Vuex的state实例，导致赋值操作完全没有生效，state里的products始终是初始的空数组。

修复后的mutation代码：

mutations: { 
    setProducts(state, products) { 
        state.products = products 
    } 
}

2. 异步操作的时序问题 #

组件的created钩子中，store.dispatch('fetchProducts')是异步操作（因为调用了API），你在dispatch之后立刻打印getter的值，此时API请求还没完成，mutation还没执行，state里的products还是空数组，所以getter返回空。

修复后的组件代码（两种方式二选一）：

• 使用async/await等待异步完成：

... 
async created() {
    await store.dispatch('fetchProducts')
    console.log(store.getters.getProductFromSlug)
}

• 使用then链式调用：

... 
created() {
    store.dispatch('fetchProducts').then(() => {
        console.log(store.getters.getProductFromSlug)
    })
}

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