Challenge: Create a Minimal Blog Engine Using Vuex

Task

Modify the provided code to use Vuex, and follow the steps below:

1. Open the src/store.js file.

2. Define state properties for posts (an array to hold posts) and post (to hold the current post).

3. Implement a getter named postsCounter to get the count of posts.

4. Create mutations, setPosts and setPost, to update the state with posts and a single post, respectively.

5. Create actions, fetchPosts and fetchPost, to fetch posts and a single post, respectively, and commit the mutations.

6. In main.js, import the store, and integrate it into the main Vue instance.

7. Update components to interact with the store using mapGetters and mapActions.

8. Replace previous data handling logic related to posts with Vuex store actions and getters.

Expected output

The output of the task should look like the following: