如何在Nuxt组件中给Vuex getter传参并保留三点展开语法

这里分3种可选方案，你可以根据自己的业务需求选择： #

方案1：最小改动（完全保留现有...mapGetters写法） #

不需要修改Vuex侧代码，仅调整组件的计算属性和监听逻辑即可，只会监听当前topicId对应的数据变化，不会响应整个MATCH_DATA其他属性的变更，性能最优。

组件代码调整： #

<script>
import { mapGetters, mapActions } from 'vuex';

export default {
    props: ['topicId'],

    computed: {
        ...mapGetters('sessionStorage', ['MATCH_DATA']),
        // 新增：单独绑定当前topicId对应的match数据
        currentMatch() {
            return this.MATCH_DATA?.[this.topicId]
        }
    },

    watch: {
        // 改为监听currentMatch即可
        currentMatch: {
            handler(newVal) {
                console.log('指定topicId的match数据更新：', newVal);
            },
            deep: true, // 若需要监听currentMatch内部嵌套属性的变化则保留，否则可删除
            immediate: true // 若需要组件初始化时就触发一次回调则保留，否则可删除
        }
    },
    
    mounted() {
        this.SUBSCRIBE_TO_TOPIC(this.topicId);
    },
    
    methods: {
        ...mapActions('sessionStorage', ['SUBSCRIBE_TO_TOPIC'])
    }
}
</script>

方案2：封装可复用的带参数Getter #

如果多个组件都需要根据topicId取对应match数据，可以在Vuex侧封装带参数的Getter，逻辑复用性更高。

1. Vuex Store代码调整： #

/* State */
export const state = () => ({
    MATCHES: {},
});

/* GETTERS */
export const getters = {
    MATCH_DATA: (state) => state.MATCHES,
    // 新增带参数的Getter，传入topicId返回对应数据
    GET_MATCH_BY_TOPIC_ID: (state) => (topicId) => {
        return state.MATCHES[topicId]
    }
};

2. 组件代码调整： #

computed: {
    ...mapGetters('sessionStorage', ['GET_MATCH_BY_TOPIC_ID']),
    currentMatch() {
        return this.GET_MATCH_BY_TOPIC_ID(this.topicId)
    }
},
// watch逻辑和方案1完全一致，监听currentMatch即可

方案3：不使用Getter，直接映射State #

如果不需要对MATCHES做额外的封装处理，直接映射Vuex的State即可，写法更简洁，性能更好。

组件代码调整： #

<script>
import { mapState, mapActions } from 'vuex'; // 引入mapState替代mapGetters

export default {
    props: ['topicId'],

    computed: {
        ...mapState('sessionStorage', ['MATCHES']), // 直接映射state的MATCHES
        currentMatch() {
            return this.MATCHES?.[this.topicId]
        }
    },

    // watch逻辑和方案1完全一致
    watch: {
        currentMatch: {
            handler(newVal) {
                console.log('指定topicId的match数据更新：', newVal);
            },
            deep: true
        }
    },
    
    mounted() {
        this.SUBSCRIBE_TO_TOPIC(this.topicId);
    },
    
    methods: {
        ...mapActions('sessionStorage', ['SUBSCRIBE_TO_TOPIC'])
    }
}
</script>

注意事项 #

如果是Nuxt2/Vue2环境，给MATCHES对象新增topicId对应的属性时，需要使用Vue.set/this.$set，或者通过解构赋值全量替换对象state.MATCHES = {...state.MATCHES, [topicId]: 新数据}，否则新增的属性不会触发响应式更新。Nuxt3/Vue3环境无此限制。

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