JSFiddle - React, Tailwind, and code Playground

by mogu10

HTML

<script src="//unpkg.com/vue/dist/vue.js"></script>
<script src="//unpkg.com/element-ui@next/lib/index.js"></script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<script src="https://unpkg.com/vuex/dist/vuex.js"></script>

<div id="app">
  <p>{{ posts }}</p>
</div>

JavaScript

const store = new Vuex.Store({
	state: {
  	posts: [],
  },
  getters: {
  	posts: state => {
    	return state.posts
   	},
  },
  actions: {
  	getData ({ commit }) {
    	axios.get('https://jsonplaceholder.typicode.com/posts')
    		.then((response) => commit('setData', response))
    		.catch((error) => console.log(error))
    },
  },
  mutations: {
  	setData(state, response) {
   		state.posts = response
 		},
  },
})

var app = new Vue({
  el: "#app",
  store,
  created () {
    this.$store.dispatch('getData')
  },
  computed: {
    posts () {
      return this.$store.getters['posts']
    },
  },
})