Question

我有一个确认对话框，当用户执行删除操作时应显示该对话框。我需要使其在全局范围内工作（许多页面可以通过向其传递确认消息和删除功能来使用此组件）。但是，我还没有找到将函数传递给此组件的方法。
提前谢谢！

ConfirmDialog组件：

<template>
  <v-dialog
    v-model="show"
    persistent
    max-width="350"
  >
    <v-card>
      <v-card-text class="text-xs-center headline lighten-2" primary-title>
        {{ message }}
      </v-card-text>
      <v-card-actions class="justify-center">
        <v-btn color="back" dark @click="close">キャンセル</v-btn>
        <v-btn color="primary" dark>削除</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
export default {
  data () {
    return {
      show: false,
      message: ''
    }
  },
  created: function () {
    this.$store.watch(state => state.confirmDialog.show, () => {
      const msg = this.$store.state.confirmDialog.message
      if (msg !== '') {
        this.show = true
        this.message = this.$store.state.confirmDialog.message
      } else {
        this.show = false
        this.message = ''
      }
    })
  },
  methods: {
    close () {
      this.$store.commit('closeDialog')
    }
  }
}
</script>

ConfirmDialog存储：

export default {
  state: {
    show: false,
    message: '',
    submitFunction: {}
  },
  getters: {
  },
  mutations: {
    showDialog (state, { message, submitFunction }) {
      state.show = true
      state.message = message
      state.submitFunction = submitFunction
    },
    closeDialog (state) {
      state.show = false
      state.message = ''
    }
  }
}

Answer 1

您可以轻松获取和设置状态。

尝试通过show获取...mapState的值

ConfirmDialog.vue：

<template>
  <v-dialog
    v-if="show"
    persistent
    max-width="350"
  >
    <v-card>
      <v-card-text class="text-xs-center headline lighten-2" primary-title>
        {{ message }}
      </v-card-text>
      <v-card-actions class="justify-center">
        <v-btn color="back" dark @click="close">キャンセル</v-btn>
        <v-btn color="primary" dark>削除</v-btn>
      </v-card-actions>
    </v-card>
  </v-dialog>
</template>

<script>
import { mapState } from 'vuex';
export default {
  data () {
    return {
      show: false,
      message: ''
    }
  },
  methods: {
    close () {
      this.$store.commit('closeDialog')
    }
  },
  computed: {
    ...mapState({
      show: 'show'
    })
  }
}
</script>

Answer 2

顾名思义，商店就是商店。您有一棵集中的树，您可以在其中保存数据，而不是功能。另一个原因是函数不可序列化。

您可以通过将功能注入为prop或使用emit并在父级中处理功能来以全局方式创建此组件。

VueJS-如何将函数传递给全局组件

2 个答案: