Vue2中点击按钮时如何关联Vuex Getter与组件变量并同步清空

1. 完善触发清空的组件（第一个组件） #

在组件中引入Vuex的mapActions，绑定cleanData action，确保点击「clean data」按钮能触发Vuex的清空操作：

<template>
    <div id="app">
        <div class="btns">
            <button id="btn--send" @click="sendData">send data</button> 
            <button id="btn--clear" @click="cleanData">clean data</button>
        </div>
        <!-- 渲染SelectFloors组件，路径根据实际项目调整 -->
        <SelectFloors />
    </div>
</template>

<script>
import { mapActions } from 'vuex'
import SelectFloors from './SelectFloors.vue'

export default {
    components: { SelectFloors },
    methods: {
        ...mapActions(['cleanData']),
        sendData() {
            // 若需将选中值同步到Vuex，可在此调用对应action（参考后续步骤）
        }
    }
}
</script>

2. 补充Vuex模块的状态更新逻辑 #

为了支持组件选中值与Vuex状态双向同步，添加设置dataSelect的mutation和action：

export default {
    state: {
        dataSelect: ""
    },
    actions: {
        cleanData({commit}) {
            commit("clean")
        },
        setDataSelect({commit}, value) {
            commit("SET_DATA_SELECT", value)
        }
    },
    mutations: {
        clean(state) {
            state.dataSelect = ""
        },
        SET_DATA_SELECT(state, value) {
            state.dataSelect = value
        }
    },
    getters: {
        DATA_SELECTED(state) {
            return state.dataSelect
        }
    }
}

3. 修改SelectFloors组件，关联Vuex Getter #

使用计算属性实现selectedFloor与Vuex的DATA_SELECTED getter双向绑定，既可以读取Vuex状态，也能在选择楼层时同步更新Vuex：

<template>
    <div class="SelectFloors">
        <p id="title--choose">Выбранный этаж</p>
        <VueSimpleSelect
            :options="floors"
            v-model="selectedFloor"
            placeholder="Выберите этаж"
            class="sel__floor"
        />
    </div>
</template>

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

export default {
    name: "selectFloors",
    data() {
        return {
            floors: [
                { label: 'floor 1', value: 1 },
                { label: 'floor 2', value: 2 },
                { label: 'floor 3', value: 3 }
            ]
        }
    },
    computed: {
        ...mapGetters(['DATA_SELECTED']),
        selectedFloor: {
            get() {
                // 读取Vuex getter的状态值
                return this.DATA_SELECTED
            },
            set(value) {
                // 选择楼层时，同步更新Vuex状态
                this.setDataSelect(value)
            }
        }
    },
    methods: {
        ...mapActions(['setDataSelect'])
    }
}
</script>

实现逻辑说明 #

• 点击「clean data」按钮时，触发Vuex的cleanData action，通过mutation将dataSelect置空。
• SelectFloors组件的selectedFloor计算属性会自动响应Vuex中DATA_SELECTED的变化，同步清空自身选中值。
• 用户选择楼层时，计算属性的set方法会调用setDataSelect action，将选中值同步到Vuex状态，确保组件与Vuex状态始终一致。

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