Vuejs2 vueJS[Vue warn]：计算属性"；标题「；已在数据中定义 从“../stores/alert”导入alertStore； Vue.component（'alert'，require（'Vue-strap'）.alert）； 导出默认值{ 数据（）{ 返回{ 显示：alertStore.state.show， 标题：alertStore.state.title， msg:alertStore.state.msg， 类型：alertStore.state.type } }, 创建（）{ }, 计算：{ 标题（）{ 返回alertStore.state.title； }, 味精（）{ 返回alertStore.state.msg； }, 类型（）{ 返回alertStore.state.type； }, 显示（）{ 返回alertStore.state.show； }, 持续时间（）{ 返回alertStore.state.duration； } }, 方法：{ dismissAlert:函数（）{ 这个.$store.dispatch（'dismissAlert'，{title:'…'}）； }, } }

名称空间在Vue中是如何工作的？数据键、计算返回对象键和所有组件对象键是否都将添加到此实例

所以如果我覆盖这个。我得到一些错误，比如：

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

我怎样才能解决这个问题

提前感谢。

<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: '...'});
        },
    }
}

@导入“../sass/_variables.scss”；
.解雇{
光标：指针；
位置：绝对位置；
右：0；
排名：0；
填充：10px；
利润率：10px；
}
.警惕{
宽度：40%；
边界半径：0；
边框宽度：5px；
利润率：10px；
.行{
保证金：0；
.标题{
字号：1.25em；
字号：800；
}
}
}
{{title}}
{{msg}}
从“../stores/alert”导入alertStore；
Vue.component（'alert'，require（'Vue-strap'）.alert）；
导出默认值{
数据（）{
返回{
显示：alertStore.state.show，
标题：alertStore.state.title，
msg:alertStore.state.msg，
类型：alertStore.state.type
}
},
创建（）{
},
计算：{
标题（）{
返回alertStore.state.title；
},
味精（）{
返回alertStore.state.msg；
},
类型（）{
返回alertStore.state.type；
},
显示（）{
返回alertStore.state.show；
},
持续时间（）{
返回alertStore.state.duration；
}
},
方法：{
dismissAlert:函数（）{
这个.$store.dispatch（'dismissAlert'，{title:'…'}）；
},
}
}

---

这是我的模板代码

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

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

---

这也不是使用Vuex商店的最佳方式。一般建议使用

MapGetter

作为文档。

您真的需要使用计算属性吗？或者为什么要在“数据”和“计算”中定义组件的成员？实际上，这段代码是由另一位开发人员编写的，我是vuejs的新手。我已经阅读了vueJS教程，但没有找到在数据对象中添加数据的解决方案。如果我从数据对象中删除return，则不会出现错误，而且我的模板仍然不会显示。Vuejs开发工具向我显示计算加载：false不知道我能做什么。发布模板的代码。请检查下面，我已经粘贴了完整的模板代码。

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