vue.js import/require数组后computed监听失败

本文探讨了在Vue应用中使用模块化状态管理时遇到的问题,特别是在异步获取数据并更新状态时,如何确保计算属性能够正确地响应状态变化。文中提供了解决方案,包括使用数组的push方法代替直接赋值以及通过data属性来跟踪状态。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

module1.js


let state = {
    spacelist: [],
    loadingStatus: null,
}

const actions = {
    getSpaceList (params) {       
        let callback = params.callback;
        delete params['callback'];
        axios.get('/tasklist').then(function(response) {
            state.spacelist = response.data.data;    //state.spacelist有值 
            console.log(state.spacelist);
            callback && callback(response.data);
        }).catch(function(error) {
            callback && callback({errno: 1,errmsg: '请求异常'});
        });
    }
}

module.exports = {
    state,

    actions

}


module2.vue


let tool = require('./module1.js');

computed: {
            spacelist(){
                return tool.state.spacelist;    //tool.state.spaclist为空
            }
        }

原因:state.spacelist = response.data.data;   在执行数组赋值的过程中,computed监听断掉了

解决方案:1,将数组的赋值改为push

                  2.在module2.vue中用data监听

data(){
            return {
                state: tool.state
            }
        }
,

computed: {
            spacelist(){
                return this.state.spacelist;    
            }
        }

                  




评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值