VueX中触发mutations方法后如何批量重置state至默认值？

要实现批量重置state到初始默认值，不用逐个变量声明，核心是保存初始状态的副本，然后在mutation中用这个副本覆盖当前state的属性，同时保持响应式。具体步骤如下：

1. 抽离初始状态定义 #

把原本写在createStore里的state单独抽成一个变量，既能复用初始值，也方便后续重置时调用：

// 定义初始状态
const initialState = {
    test1: "",
    test2: "",
    test3: "",
    test4: "",
    test5: "",
};

export default createStore({
    state: () => ({ ...initialState }), // 用展开运算符创建初始状态的独立副本
    mutations: {
        reset_state(state) {
            // 用Object.assign把初始状态的属性覆盖到当前state，保留响应式
            Object.assign(state, initialState);
        }
    }
})

2. 关键细节说明 #

• state: () => ({ ...initialState })：如果直接写state: initialState，多实例场景下会共享同一个对象引用，用函数返回副本能避免状态污染。
• Object.assign(state, initialState)：该方法会逐个修改当前state对象的属性，而非替换整个state，从而保留VueX的响应式特性。

3. 组件中触发重置 #

在Vue组件里，直接调用mutation即可触发重置：

Options API 写法 #

<script>
export default {
    methods: {
        handleReset() {
            this.$store.commit('reset_state');
        }
    }
}
</script>

Composition API 写法（Vue 3） #

<script setup>
import { useStore } from 'vuex';
const store = useStore();

const handleReset = () => {
    store.commit('reset_state');
};
</script>

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