子组件是否应该可以访问商店？

Question

免责声明：对不起，这会有点长

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

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

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

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

• 阅读：组件显示title和text。
• 更新：组件显示title输入和text输入
• 创建：相同的组件用于创建一个新帖子，所以它就像更新，但具有空值。

第一种方法：组件处理商店数据：

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

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

示例代码

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。

另一方面，知道太多是有问题的，组件范围之外的很多事情可能会破坏它。

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

在这种方法中，组件将获取所有内容作为属性：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。

此外，如果这个父级除了 之外还有许多子级Post，它就会成为一个非常胖的逻辑容器。

结束

请注意，我的组件要复杂得多，有关如何解决此特定问题的任何想法？

在此先感谢您，感谢您阅读到此为止。

Answer 1

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

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

但我主要认为直接操纵商店。