Vuex存储筛选标签数组push新值时整个数组被覆盖如何解决

问题原因 #

• 调用mutation时未传递payload参数，导致mutation无法拿到你要添加的筛选关键词
• 持久化存储时错误保存了单个新增的关键词，而非更新后的完整筛选数组，导致下次从sessionStorage初始化state时，只能拿到上一次存的单个值，看起来就像数组被覆盖了

修复代码 #

1. 修正action，传参给mutation #

const setCurrentFilters = async (context, payload) => {
    if (payload) {
        // 新增payload参数传递
        context.commit('setCurrentFilter', payload);
    }
}

2. 修正mutation，存储完整数组 #

setCurrentFilter(state, payload) {
    // 可选：加去重逻辑，避免重复添加相同标签
    if (!state.filters.includes(payload)) {
        state.filters.push(payload);
    }
    // 存储更新后的完整filters数组，而非单个payload
    sessionStorage.setItem('currentFilters', JSON.stringify(state.filters));
}

补充说明 #

如果要使用展开语法替代push也可以，写法如下，效果完全一致：

state.filters = [...state.filters, payload]

Vue 2/3 中数组的push方法本身是响应式的，不需要额外处理，之前的问题和数组操作方法无关，是参数传递和存储逻辑错误导致的。

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