vueJS [Vueが警告]を：計算されたプロパティ "タイトル" はすでにデータに定義されている

Question

<script> 
import alertStore from '../stores/alert'; 
Vue.component('alert', require('vue-strap').alert); 

export default { 
    data() { 
     return { 
      show: alertStore.state.show, 
      title: alertStore.state.title, 
      msg: alertStore.state.msg, 
      type: alertStore.state.type 
     } 
    }, 
    created() { 
    }, 
    computed: { 
     title() { 

      return alertStore.state.title; 
     }, 
     msg() { 
      return alertStore.state.msg; 
     }, 
     type() { 
      return alertStore.state.type; 
     }, 
     show() { 
      return alertStore.state.show; 
     }, 
     duration() { 
      return alertStore.state.duration; 
     } 
    }, 
    methods: { 
     dismissAlert: function() { 
      this.$store.dispatch('dismissAlert', {title: '...'}); 
     }, 
    } 
} 

どのようにしてVueの中に名前空間の仕事？データキー、計算された戻りオブジェクトキー、およびすべてのコンポーネントオブジェクトキーの両方がこのインスタンスに追加されますか？

これを上書きすると

[Vue警告]：計算されたプロパティ "title"はすでにデータに定義されています。
[Vue警告]：計算されたプロパティ "show"は既にデータに定義されています。
[Vue警告]：計算されたプロパティ "type"は既にデータに定義されています。
[Vue警告]：計算されたプロパティ "msg"は既にデータに定義されています。

どうすれば解決できますか？

ありがとうございます。

Answer 1

<style lang="sass" scoped> 
    @import '../../sass/_variables.scss'; 
    .dismiss { 
     cursor: pointer; 
     position: absolute; 
     right: 0; 
     top: 0; 
     padding: 10px; 
     margin: 10px; 
    } 
    .alert { 
     width: 40%; 
     border-radius: 0; 
     border-width: 5px; 
     margin: 10px; 
     .row { 
      margin: 0; 
      .header { 
       font-size: 1.25em; 
       font-weight: 800; 
      } 
     } 
    } 
</style> 
<template> 
    <div> 
     <alert class='card' v-show="show" placement="top" :duration="duration" :type="type"> 
      <div class="row"> 
       <div class="header"> 
        {{ title }} 
       </div> 
       <div class='message'> 
        {{ msg }} 
       </div> 
      </div> 
      <div class="dismiss" title="Click to dismiss" @click="dismissAlert"> 
       <i class="fa fa-times" aria-hidden="true"></i> 
      </div> 
     </alert> 
    </div> 
</template> 
<script> 
    import alertStore from '../stores/alert'; 
    Vue.component('alert', require('vue-strap').alert); 

    export default { 
     data() { 
      return { 
       show: alertStore.state.show, 
       title: alertStore.state.title, 
       msg: alertStore.state.msg, 
       type: alertStore.state.type 
      } 
     }, 
     created() { 
     }, 
     computed: { 
      title() { 
       return alertStore.state.title; 
      }, 
      msg() { 
       return alertStore.state.msg; 
      }, 
      type() { 
       return alertStore.state.type; 
      }, 
      show() { 
       return alertStore.state.show; 
      }, 
      duration() { 
       return alertStore.state.duration; 
      } 
     }, 
     methods: { 
      dismissAlert: function() { 
       this.$store.dispatch('dismissAlert', {title: '...'}); 
      }, 
     } 
    } 
</script> 

これは私のテンプレートコード

Answer 2

Vueのは、インスタンスのルートにデータメソッド内のすべてのプロパティをバインドしています。また、これは計算されたプロパティとメソッドでも行われるため、名前の競合を避けるために別の名前を使用する必要があります。

投稿したコードの主な問題は、すべてのデータプロパティに名前の競合があることです。実際には、Vuexストアを使用しているため、計算されたプロパティだけではデータプロパティはまったく必要ありません。

これは、Vuexストアを使用する最善の方法でもありません。一般的な推奨事項はmapGettersを文書hereとして使用することです。