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

Question

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

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

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

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

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

• 阅读：该组件显示title和text。
• 更新：该组件显示title输入和text输入
• 创建：相同的组件用于创建新帖子，因此它就像更新，但值为空。

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

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

2. 对于创建状态，将null 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组件的状态一样。

此外，如果此父级有许多除Post以外的子级，它将成为一个非常胖的逻辑容器。

结束

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

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