问题:

Vuex中的数据修改之后,子组件的数据不会实时更新,需要切换到其他页面,在切换回来数据才会更新,渲染页面

子组件代码:

 data(){
        return{
            
            data:this.$store.state.ganttData,
        }

    },

为什么会出现这种情况呢?

原因是因为在在获取Vuex数据时,是在页面加载前进行获取,在加载完毕之后,Vuex的数据修改后,你子组件的页面还是初始的数据,并不会进行更新

解决思路:

1. 切换页面,重新获取到修改后的数据,很显然这个办法不符合现实使用场景

2.使用mapState,实时获取的Vuex中的数据状态

import { mapState } from 'vuex' 

computed:mapState({
        data(state){
            return state.schedule
        }
    })

Logo

前往低代码交流专区

更多推荐