vueJS [Vue 警告]：计算属性“title”已在数据中定义

Posted 2023-02-23

【中文标题】vueJS [Vue 警告]：计算属性“title”已在数据中定义

【英文标题】：vueJS [Vue warn]: The computed property "title" is already defined in data

【发布时间】：2018-02-14 15:23:46

【问题描述】：

<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 中是如何工作的？数据键、计算返回对象键和所有组件对象键都将添加到 this 实例中吗？

所以如果我覆盖它。我收到一些错误，例如：

[Vue 警告]：计算属性“title”已在数据中定义。 [Vue 警告]：计算属性“show”已在数据中定义。 [Vue 警告]：计算属性“类型”已在数据中定义。 [Vue 警告]：计算属性“msg”已在数据中定义。

我该如何解决这个问题。

提前致谢。

【问题讨论】：

你真的需要使用计算属性吗？或者为什么要在“数据”和“计算”中定义组件的成员？

实际上这段代码是由另一个开发人员完成的，我是 vuejs 的新手。我已经阅读了 vueJS 教程，但没有找到任何解决方案，为什么要在数据对象中添加数据。如果我从数据对象中删除返回，则不会出现错误，并且我的模板仍然没有显示。 Vuejs 开发工具显示计算加载：false 知道我能做什么。

模板的邮政编码。

请检查下面，我已经粘贴了我的完整模板代码。

【参考方案1】：

Vue 将 data 方法中的所有属性绑定到实例的根目录。它也对计算属性和方法执行此操作，因此您必须使用不同的名称以避免命名冲突。

您发布的代码中的主要问题是您与每个数据属性都有命名冲突。事实上，因为您使用的是 Vuex 存储，所以根本不需要数据属性，只需要计算属性。

这也不是使用 Vuex 商店的最佳方式。一般建议使用mapGetters作为文档here。

【参考方案2】：

    <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>

这是我的模板代码