Should a child component have access to the store?

Question

Disclaimer: sorry this is going to be a bit long

So I'm working on an intermediately complex app using Vue JS and Vuex.

This is my first Vue SPA project so I'm facing some difficulties with architectural choices, particularity with the question "who should know about the store?"

I'll describe my problem with a dummy example:

Say we have a Post component that has 3 states to get switched with a button:

• Read: the component shows the title and text.
• Update: the component shows title input and text input
• Create: the same component is used for creating a new post, so it's just like update but with empty values.

First Approach: the component handles the store data:

1. Now in order to show and update a post, the component gets an id prop and selects the post object from a list of posts within the store, and dispatches actions when necessary. It has an update internal attribute to switch between show and update states.

2. As for the create state, a null id is passed to the component, so it won't fetch anything from the store and shows inputs, it dispatches insert actions.

Example Code

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];
        }
    }
};

Comments

The benefits I see in this is mainly the encapsulation of everything related to the component. It knows how to get its data and it is stand alone, all I need is to pass it an id.

On the other hand, knowing too much is problematic, a lot of things outside of the scope of the component could break it.

Second Approach: the component knows nothing about the store:

In this approach the component would get everything as a property: id, title, text, and state to tell it if it should render inputs or just text fields.

And instead of dispatching actions it would maybe emit events.

Example Code

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

Comments

While this solves the dependencies problem, it just pushes some of the logic to the parent component like handling if states of the Post component.

Also if this parent has many children other than Post, it'd become a very fat logic container.

The End

Note that my component is a lot more complex, any ideas on how to approach this particular problem?

Thanks in advance, and I appreciate you reading so far.

Answer 1

You're pretty much in the area of "primarily opinion-based," but I'll put in my two cents: The store is a global; lean toward having things manipulate it directly, rather than putting layers between it and components.

However, if the components you're using to implement your program have much promise of reusability, you might want to implement them in the usual encapsulated way, pushing the store interaction up.

But mostly I think manipulate the store directly.