Vue3中Vuex对象数组更新后页面无响应的问题求助

问题根源 #

1. Vuex mutation逻辑错误：setLicenses中的操作混乱，不仅会导致licenses变成二维数组（若传入值为数组），还使用了Vue3已废弃的Vue.set方法，状态更新不符合预期。
2. 组件状态未同步：仅在mounted时执行一次handleUpdates，未监听Vuex中licenses的变化，导致new_buyer、license_state等data变量无法随状态更新，进而使依赖这些变量的buy_inner_html无法实时响应。

修复步骤 #

一、修正Vuex中的setLicenses mutation #

直接替换为正确的数组赋值，Vue3的Proxy响应式系统支持直接替换数组：

setLicenses(state, value){
    console.log(`setLicenses=${JSON.stringify(value)}`);
    // 直接赋值新数组，自动触发响应式更新
    state.licenses = value;
}

原代码中先清空数组再push(value)的操作会将整个传入数组作为单个元素塞入，导致licenses变为二维数组；Vue.set在Vue3中已被移除，无需使用。

二、让组件自动同步状态 #

方案1：使用watch监听licenses变化

在组件选项中添加watch配置，监听licenses并自动执行状态更新：

watch: {
    licenses: {
        handler() {
            this.handleUpdates();
        },
        // 深度监听数组元素的变更
        deep: true,
        // 初始化时立即执行一次，替代mounted中的调用
        immediate: true
    }
}

之后可以移除mounted中的this.handleUpdates();。

方案2：将状态判断转为computed属性（更推荐）

把依赖licenses的变量转为computed属性，让Vue自动维护响应式同步：

computed: {
    ...mapState(['loggedInEmail','accountID','licenses']),
    billingurl: function(){
        return process.env.VUE_APP_BILLING_URL+'?prefilled_email='+this.loggedInEmail
    },
    buyurl: function(){
        return process.env.VUE_APP_BUY_URL+'?prefilled_email='+this.loggedInEmail+'&client_reference_id='+this.accountID
    },
    // 新增computed属性替代原data变量
    filteredLicense() {
        return this.licenses.filter(el => el.product_code === '1')[0];
    },
    new_buyer() {
        return !this.filteredLicense;
    },
    billing_disabled() {
        return this.new_buyer;
    },
    license_state() {
        if (!this.filteredLicense) return '';
        if (this.filteredLicense.active) {
            const licenseExpiration = moment.unix(this.filteredLicense.subscriptions[0].current_period_end_timestamp);
            return moment().isAfter(licenseExpiration) ? 'expired' : 'active';
        } else {
            return 'deactivated';
        }
    },
    license_info() {
        return this.filteredLicense || {subscriptions:[{current_period_end_timestamp:"123456789"}]};
    },
    buy_inner_html() {
        if(!this.new_buyer){
            if(this.license_state==="active"){
                return `
                    <div>Thank you</div>
                    <div style="font-size:10px;padding-top:4px;">Expires: ${moment.unix(this.license_info.subscriptions[0].current_period_end_timestamp).format("MMMM Do, YYYY")}</div>`;
            }
            if(this.license_state==="expired"){
                return `
                    <div>Expired</div>
                    <div style="font-size:10px;padding-top:4px;">${moment.unix(this.license_info.subscriptions[0].current_period_end_timestamp).format("MMMM Do, YYYY")}</div>`;
            }
            if(this.license_state==="deactivated"){
                return `
                    <div>Inactive</div>
                    <div style="font-size:10px;padding-top:4px;">Please Renew Your Subscription</div>`
            }
            return `<div style="color:#F00">Error</div>`;
        }else{
            return `<div>Buy Now!</div>`;
        }
    },
},

同时删除data中对应的变量：new_buyer、billing_disabled、license_state、license_info。

内容的提问来源于stack exchange，提问作者Joseph Astrahan