Home component

action.js

import Vue from 'vue'
import axios from 'axios'
import VueAxios from 'vue-axios'

Vue.use(VueAxios, axios)
/*eslint-disable */
export default {
  async loadblog ({ commit }) {
    	axios.get('https://jsonplaceholder.typicode.com/posts')
    	.then(response => {
    		commit('LOAD_BLOGS', response.data)
    	}).catch(error => {
    		commit('LOAD_BLOGS', [])
    	})
  },
  async storepost ({ commit }, payload) {
    	axios.post('https://jsonplaceholder.typicode.com/posts', {
	    	body: payload,
	    	headers: {
	      		'Content-type': 'application/json; charset=UTF-8'
	    	}
    })
      .then(response => {
        console.log(response.data.body)
        commit('STORE_BLOGS', response.data.body)
      })
      .catch(error => {
    	commit('STORE_BLOGS', [])
      })
  }
}

Add.js

<template>
  <div class="about">
    <h1>Add Post</h1>
    <form method="post" @submit.prevent="post">
    	<div>
	    	<label>Title</label>
	    	<input type="text" name="" v-model="title" required>
	    </div>
	    <div>
	    	<label>Description</label>
	    	<textarea v-model="description" required></textarea>
	    </div>
	    <div>
	    	<button type="submit">Submit</button>
	    </div>

    </form>
  </div>
</template>
<script>
// import { mapState } from 'vuex'
export default {
  name: 'Add',
  data () {
    return {
      title: '',
      description: ''
    }
  },
  methods: {
    post (e) {
      const title = this.title
      const description = this.description
      const payload = { title: title, body: description, userId: 100 }
      this.$store.dispatch('storepost', payload)
        .then(response => {
          this.$router.push('/')
        })
    }
  }
}
</script>

getters.js

export default {
  findBlogById: (state, getters) => (id) => {
    return state.blogs.find(blog => blog.id === id)
  }
}

Home.js

<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" width="100">
    <HelloWorld msg="Vuex App"/>
  </div>
</template>

<script>
// @ is an alias to /src
import HelloWorld from '@/components/HelloWorld.vue'
export default {
  name: 'home',
  components: {
    HelloWorld
  }
}
</script>

mutation.js

export default {
  LOAD_BLOGS (state, blog) {
    state.blogs = blog
  },
  STORE_BLOGS (state, blog) {
    state.blogs.unshift(blog)
  }
}

Post.js

<template>
  <div>
    <div v-if="blogs">
		  <h3> {{blogs.title}} </h3>
      <p>{{blogs.body}}</p>
    </div>
  
  </div>
</template>

<script>
export default {
  name: 'Post',
  data () {
    return {
      blogs: []
    }
  },
  async mounted () {
    this.$store.dispatch('loadblog')
    const id = this.$route.params.id
    this.blogs = this.$store.getters.findBlogById(id)
  },
  computed: {
  }
}
</script>

store.js

import Vue from 'vue'
import Vuex from 'vuex'

import mutation from './store/mutation'
import action from './store/action'
import getters from './store/getters'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    users: [],
    blogs: []
  },
  actions: action,
  mutations: mutation,
  getters: getters
})