使用vuex控制组件显示隐藏

首先，在你的Vue项目中安装vuex：

npm install vuex --save

然后在创建一个store.js文件，用于创建store实例和定义state、mutations等：

import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

const store = new Vuex.Store({
  state: {
    showComponent: false
  },
  mutations: {
    setShowComponent(state, value) {
      state.showComponent = value
    }
  },
  actions: {
    setShowComponent({ commit }, value) {
      commit('setShowComponent', value)
    }
  },
  getters: {
    showComponent: state => state.showComponent
  }
})

export default store

然后在main.js中引入store.js：

import Vue from 'vue'
import App from './App.vue'
import store from './store'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
  store
}).$mount('#app')

接下来，在组件中通过computed计算属性获取showComponent的值，并通过v-if指令决定是否显示该组件：

<template>
  <div>
    <button @click="toggleComponent">Toggle Component</button>
    <div v-if="showComponent">
      <!-- 组件内容 -->
    </div>
  </div>
</template>

<script>
export default {
  computed: {
    showComponent() {
      return this.$store.getters.showComponent
    }
  },
  methods: {
    toggleComponent() {
      this.$store.dispatch('setShowComponent', !this.showComponent)
    }
  }
}
</script>

以上代码中，toggleComponent方法用于切换showComponent的值，从而控制组件的显示和隐藏。在方法中调用了store的dispatch方法，以触发setShowComponent action，该action会调用mutations中的setShowComponent方法，从而更新state中的showComponent值。最后，通过computed计算属性获取showComponent的值，决定是否显示组件。

希望这个例子能够帮助你理解如何使用vuex控制组件的显示和隐藏。