子组件是不是应该有权访问商店？

Posted 2023-02-23

技术标签:

【中文标题】子组件是不是应该有权访问商店？【英文标题】：Should a child component have access to the store?子组件是否应该有权访问商店？ 【发布时间】：2017-10-09 19:17:54 【问题描述】：

免责声明：抱歉，这会有点长

所以我正在使用 Vue JS 和 Vuex 开发一个中等复杂的应用程序。

这是我的第一个 Vue SPA 项目，所以我在架构选择方面遇到了一些困难，尤其是“谁应该了解商店？”的问题

我将用一个虚拟示例来描述我的问题：

假设我们有一个 Post 组件，它有 3 个状态可以通过按钮进行切换：

阅读：组件显示title和text。更新：组件显示title输入和text输入创建：同一个组件用于创建新帖子，因此它与更新类似，但具有空值。

第一种方法：组件处理存储数据：

现在为了显示和更新帖子，组件获取一个id 属性并从商店中的帖子列表中选择帖子对象，并在必要时调度操作。它有一个update 内部属性可以在显示和更新状态之间切换。

至于创建状态，一个空的id 被传递给组件，所以它不会从存储中获取任何东西并显示输入，它会调度插入操作。

示例代码

const KnowledgebalePost = 
    name: 'Post',
    props: ['id'],
    data() 
        return 
            post: 
                title: '',
                text: '',
            ,
            state: 'show'
        
    ,
    methods: 
        updateClicked() 
            this.state = 'update';
        ,
        saveClicked() 
            this.state = 'show';
            const postObject =  id: this.id, ...this.post ;
            const action = this.id ? 'updatePost' : 'addPost';
            this.$store.dispatch(action, postObject);
        ,
    ,
    created() 
        if(this.id) 
            // just to simplify
            this.post = this.$store.state.posts[this.id];
        
    
;

我在这方面看到的好处主要是封装了与组件相关的所有内容。它知道如何获取它的数据并且它是独立的，我所需要的只是传递一个 id。

另一方面，知道太多是有问题的，很多超出组件范围的东西可能会破坏它。

第二种方法：组件对商店一无所知：

在这种方法中，组件将获取所有内容作为属性：id、title、text 和 state，以告诉它是应该呈现输入还是只呈现文本字段。

它可能会发出事件，而不是调度动作。

示例代码

const IgnorantPost = 
    name: 'Post',
    props: ['id', 'title', 'text', 'state'],
    data() 
        return 
            post: 
                title: '',
                text: '',
            ,
            internalState: 'show'
        
    ,
    methods: 
        updateClicked() 
            this.internalState = 'update';
        ,
        saveClicked() 
            this.internalState = 'show';
            this.$emit('saving',  id: this.id, ...this.post );
        ,
    ,
    created() 
        this.post.title = this.title;
        this.post.text = this.text;
        this.internalState = this.state;
    
;

虽然这解决了依赖问题，但它只是将一些逻辑推送到父组件，例如处理 Post 组件的 if 状态。

另外，如果这个父级有很多子级而不是Post，它会变成一个非常胖的逻辑容器。