vue vuex u-switch开关绑定数据

商鸿哲
2023-12-01

 vuex存储

import Vue from "vue";
import Vuex from "vuex";

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    isNotifyEnabled: false
  },
  mutations: {
    updateNotifyEnabled(state, value) {
      state.isNotifyEnabled = value;
    }
  },
});

UI+JS

<template>
  <v-switch
        v-model="isNotifyEnabled"
        :label="`Switch status: ${isNotifyEnabled.toString()}`"
  ></v-switch>
</template>
computed: {
    isNotifyEnabled: {
      get() {
        return this.$store.state.isNotifyEnabled;
      },
      set(value) {
        this.$store.commit("updateNotifyEnabled", value);
      }
    }
}

参考
Vuetify switch with Vuex? - IT & Software development Q&A

基础知识

第四十四节:Vuex状态管理:辅助函数mapMutations与mapActions - 简书

 类似资料: