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

Question

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

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

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

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

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

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

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

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

2. 至于创建状态，一个空的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，它会变成一个非常胖的逻辑容器。

结束

请注意，我的组件要复杂得多，有什么想法可以解决这个特殊问题吗？

提前致谢，感谢您到目前为止的阅读。

Answer 1

您几乎处于“主要基于意见”的领域，但我会投入两分钱：商店是全球性的；倾向于让事物直接操纵它，而不是在它和组件之间放置层。

但是，如果您用于实现程序的组件具有很大的可重用性，您可能希望以通常的封装方式来实现它们，从而推动商店交互。

但大多数情况下我认为直接操纵商店。