使用vuex控制组件显示隐藏

要使用 Vuex 控制组件的显示和隐藏，你需要在 Vuex store 中定义一个状态（比如 `showComponent`），然后在组件中使用这个状态来控制组件的显示和隐藏。

下面是一个示例代码：

在 Vuex store 中，定义一个 `showComponent` 状态：

// store.js

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
    showComponent: false
  },
  mutations: {
    setShowComponent(state, value) {
      state.showComponent = value;
    }
  },
  actions: {
    toggleComponent({ commit, state }) {
      commit('setShowComponent', !state.showComponent);
    }
  }
});

在组件中，使用 `showComponent` 状态来控制组件的显示和隐藏：

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

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

export default {
  computed: {
    ...mapState(['showComponent'])
  },
  methods: {
    ...mapActions(['toggleComponent'])
  }
};
</script>

在上面的代码中，当 `showComponent` 状态为 `true` 时，组件会被显示出来，当状态为 `false` 时，组件会被隐藏起来。点击按钮时，调用 `toggleComponent` 方法来切换 `showComponent` 状态的值。