VueJS如何向计算属性传递参数实现多按钮状态管理？

核心思路 #

用一个统一的状态容器（对象或Map）管理所有按钮的开关状态，配合通用的切换方法，无需为每个按钮单独声明变量和函数。

1. 初始化状态容器 #

推荐用Vue的reactive创建响应式对象（固定类别场景）或Map（动态添加类别场景）：

固定类别场景（对象）

import { reactive } from 'vue'

// 键为按钮类别，值为布尔状态（true=激活，false=未激活）
const buttonStates = reactive({
  categoryA: true,
  categoryB: false,
  categoryC: true
})

动态类别场景（Map）

import { reactive } from 'vue'

const buttonStatesMap = reactive(new Map([
  ['categoryA', true],
  ['categoryB', false],
  ['categoryC', true]
]))

2. 动态Class绑定 #

直接在模板中通过状态容器判断，无需计算属性：

对象版模板

<template>
  <button 
    :class="{ 'active': buttonStates.categoryA }"
    @click="toggleState('categoryA')"
  >
    类别A
  </button>
  <button 
    :class="{ 'active': buttonStates.categoryB }"
    @click="toggleState('categoryB')"
  >
    类别B
  </button>
  <button 
    :class="{ 'active': buttonStates.categoryC }"
    @click="toggleState('categoryC')"
  >
    类别C
  </button>
</template>

Map版模板

<template>
  <button 
    :class="{ 'active': buttonStatesMap.get('categoryA') }"
    @click="toggleState('categoryA')"
  >
    类别A
  </button>
</template>

复杂类名逻辑（用方法替代计算属性）

如果需要多条件判断类名，写一个通用方法即可：

const getButtonClass = (category) => {
  const isActive = buttonStates[category]
  return {
    'active': isActive,
    'btn-primary': isActive,
    'btn-outline': !isActive
  }
}

模板调用：

<button :class="getButtonClass('categoryA')" @click="toggleState('categoryA')">类别A</button>

3. 通用状态切换方法 #

只需要一个方法，接收类别参数即可切换对应状态：

对象版切换方法

const toggleState = (category) => {
  buttonStates[category] = !buttonStates[category]
}

Map版切换方法

const toggleState = (category) => {
  const currentState = buttonStatesMap.get(category)
  buttonStatesMap.set(category, !currentState)
}

关于之前计算属性失效的说明 #

Vue计算属性本身不支持直接传参，正确的带参写法是让计算属性返回一个函数（依赖追踪依然有效）：

import { computed } from 'vue'

const isButtonActive = computed(() => {
  return (category) => buttonStates[category]
})

模板调用：

<button :class="{ active: isButtonActive('categoryA') }" @click="toggleState('categoryA')">类别A</button>

但相比直接用状态容器判断，这种写法并无优势，反而多一层封装。

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