vue3-vuex异步请求数据后的数据处理的问题

有这么一个需求,现在要从服务器请求回来一组数据,然后将它渲染到页面上

显然这个需求需要用到vuex和vue组件

那么实现的思路就应该是这样的

先在vuex的action中请求数据,代码大概是这样的

    actions: {
        async getHomeBaseData({ commit }) {
    
            const { data} = await homeBaseData()
            //存入数据到state
            commit('changeArticleCount', data.articleCount)
　　　　　　　　
            }
        },
    },    

当然,这个action要在组件内被调用触发

const store = useStore()
store.dispatch('getHomeBaseData')
const articleCount = store.state.articleCoun

如果没啥问题的话,下面就该从state中取数据了,问题就出在这里

由于action中是异步请求,所以结果并不会如期那样,原因很简单

组件内的这段代码发现有异步请求,会先将同步代码执行完再执行异步代码,这样一来

articleCount 的值就只是state的初始值,但是在devtools里可以看到数值的确是变化了的

所以我们只需要让组件中的articleCount能接收到state中的变化即可,
没错,就是响应式,
在vue3中,使用computed来使变量具有响应式

const articleCount =computed(() => {
    return store.state.articleCount
})

完美解决!

需要注意的一点是:

解构操作会使数据的响应式效果丢失,需要使用toRef来使解构的对象保持响应式

使用watchEffect可以检测到数据是发生了两次变化的,如果使用时数据是必须的,那么请考虑给响应的数据一个默认值~~,TypeScript中也可以使用?来判断是否存在值()

如果数据过多可以考虑封装一个工具类,配合mapState使用~~~

----------------------------------------

 

另外,webpack的require居然会把指定目录下所有文件跑一遍,一个图标包一万多个文件,热更新居然要等半分钟!!!

还是vite好用!!强烈推荐