Vue在多个按钮状态之间切换

<template>
  <div>
    <input type="radio" id="option1" value="Option 1" v-model="selected">
    <label for="option1">Option 1</label>

    <input type="radio" id="option2" value="Option 2" v-model="selected">
    <label for="option2">Option 2</label>

    <span>Selected: {{ selected }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      selected: ''
    };
  }
};
</script>

<template>
  <div>
    <button @click="toggleState">Toggle State</button>
    <span>Current State: {{ currentState }}</span>
  </div>
</template>

<script>
export default {
  data() {
    return {
      state: false
    };
  },
  computed: {
    currentState() {
      return this.state ? 'ON' : 'OFF';
    }
  },
  methods: {
    toggleState() {
      this.state = !this.state;
    }
  }
};
</script>

// store.js
import { createStore } from 'vuex';

export default createStore({
  state() {
    return {
      buttonState: false
    };
  },
  mutations: {
    toggleButtonState(state) {
      state.buttonState = !state.buttonState;
    }
  }
});

<template>
  <div>
    <button @click="toggleState">Toggle State</button>
    <span>Current State: {{ buttonState }}</span>
  </div>
</template>

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  computed: {
    ...mapState(['buttonState'])
  },
  methods: {
    ...mapMutations(['toggleButtonState']),
    toggleState() {
      this.toggleButtonState();
    }
  }
};
</script>