vue使用store的值控制dialog

可以通过在 Vue 组件中使用计算属性来监听 store 中的值的变化，并在需要的时候打开或关闭 dialog。具体步骤如下：

1. 在 store 中定义一个 state，用于存储 dialog 是否应该显示的状态，例如：

// store.js
export default new Vuex.Store({
  state: {
    showDialog: false
  },
  mutations: {
    toggleDialog(state) {
      state.showDialog = !state.showDialog;
    }
  }
});

2. 在需要控制 dialog 的组件中，使用计算属性监听 store 中的 showDialog 的变化，并根据它的值来决定是否显示 dialog。例如：

// MyComponent.vue
<template>
  <div>
    <button @click="toggleDialog">打开/关闭 Dialog</button>
    <Dialog :visible="showDialog" @close="toggleDialog">
      <!-- dialog 内容 -->
    </Dialog>
  </div>
</template>

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

export default {
  computed: {
    ...mapState(['showDialog']),
    showDialog: {
      get() {
        return this.showDialog;
      },
      set(value) {
        this.toggleDialog();
      }
    }
  },
  methods: {
    ...mapMutations(['toggleDialog'])
  }
};
</script>

在这个例子中，我们使用了 `mapState` 和 `mapMutations` 这两个辅助函数来简化代码。`mapState` 用于将 store 中的 state 映射到组件的计算属性中，而 `mapMutations` 则用于将 store 中的 mutations 映射到组件的 methods 中。这样组件就可以通过调用 `toggleDialog` 方法来改变 store 中的 showDialog 的值了。而在计算属性中，我们通过监听 `showDialog` 的变化来决定是否显示 Dialog。当 `showDialog` 的值发生变化时，计算属性的 setter 方法就会被调用，从而触发 `toggleDialog` 方法，改变 store 中的 showDialog 的值。

总之，通过在 Vue 组件中监听 store 中的值的变化，并在需要的时候打开或关闭 dialog，我们可以很方便地实现对话框的控制。