基于Vuex状态有条件地呈现模型

// store.js
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    isModelVisible: false
  },
  mutations: {
    showModel(state) {
      state.isModelVisible = true
    },
    hideModel(state) {
      state.isModelVisible = false
    }
  },
  actions: {
    showModel({ commit }) {
      commit('showModel')
    },
    hideModel({ commit }) {
      commit('hideModel')
    }
  },
  getters: {
    isModelVisible: state => state.isModelVisible
  }
})

export default store

<template>
  <div>
    <button @click="toggleModel">Toggle Model</button>
    <div v-if="isModelVisible">Model Content</div>
  </div>
</template>

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

export default {
  computed: {
    ...mapGetters(['isModelVisible'])
  },
  methods: {
    ...mapActions(['showModel', 'hideModel']),
    toggleModel() {
      if (this.isModelVisible) {
        this.hideModel()
      } else {
        this.showModel()
      }
    }
  }
}
</script>