从Vuex中获取数据,数据不更新

问题:

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
        }
    })

  • 2
    点赞
  • 5
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
在使用Vuex异步获取数据时,可以在actions定义一个函数来进行数据的异步获取。在这个函数可以使用Promise对象来处理异步操作,然后将获取到的数据通过commit方法提交给mutations来修改state数据。举个例子,假设我们需要异步获取电影院的数据: ```javascript // actions的定义 actions: { getCinemaData(store) { return new Promise((resolve, reject) => { // 异步获取数据的逻辑 // 这里可以使用axios或者其他方式发送异步请求获取数据 axios.get('/api/cinema') .then(response => { // 获取到数据后,通过commit方法提交mutation来修改state数据 store.commit('SET_CINEMA_DATA', response.data); resolve(); }) .catch(error => { reject(error); }); }); } }, // mutations的定义 mutations: { SET_CINEMA_DATA(state, data) { state.cinemaData = data; } } ``` 在组件使用异步获取数据的方法是通过dispatch方法来触发actions的函数: ```javascript // 在组件触发异步获取数据的方法 this.$store.dispatch('getCinemaData') .then(() => { // 数据获取成功后的处理逻辑 // 可以在这里使用mapState方法将state数据映射到组件的computed属性 }) .catch(error => { // 异常处理逻辑 }); ``` 使用Vuex进行异步数据获取的好处是可以统一管理和维护共享的状态或数据,在兄弟组件间传递数据也更加方便。<span class="em">1</span><span class="em">2</span><span class="em">3</span> #### 引用[.reference_title] - *1* [vuex异步流程](https://blog.csdn.net/a1598452168YY/article/details/128247264)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *2* [vuex最详细完整的使用用法](https://blog.csdn.net/qq_41619567/article/details/84787428)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] - *3* [Vuex异步获取数据的步骤](https://blog.csdn.net/lxj07215212/article/details/123633804)[target="_blank" data-report-click={"spm":"1018.2226.3001.9630","extra":{"utm_source":"vip_chatgpt_common_search_pc_result","utm_medium":"distribute.pc_search_result.none-task-cask-2~all~insert_cask~default-1-null.142^v92^chatsearchT0_1"}}] [.reference_item style="max-width: 33.333333333333336%"] [ .reference_list ]
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值