[Vuejs]-VueJS – How to pass function to global component

0👍

you can get and set states easily.

try getting the value of show with ...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>

0👍

The store is, as the name says, a store. You have a centralized tree where you save data, not functionalities. Another reason is that functions are not serializable.

You could create this component in a global way by injecting the function as prop or by using emit and handling the functionality in the parent.

Leave a comment