JSFiddle - React, Tailwind, and code Playground

by awolf2904

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.10/vue.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuex/2.1.1/vuex.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/axios/0.15.3/axios.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fetch-jsonp/1.0.5/fetch-jsonp.min.js"></script>
<div id="app">
  <users></users>
  <pre>{{users}}</pre>
</div>

Babel + JSX

const api = 
'https://jsonplaceholder.typicode.com/users'

const UPDATE_USERS = 'UPDATE_USERS'

const store = new Vuex.Store({
	state: {
  	users: {}
  },
  mutations: {
  	[UPDATE_USERS] (state, users) {
    	console.log('mutate users', users)
    	state.users = users;
      console.log(state)
    }
  },
  getters: {
  	users (state) {
    	return state.users
    }
  },
  actions: {
  	getUsers ({commit}) {
    	return fetchJsonp(api)
      	.then((users) => users.json())
        .then((usersParsed) => commit(UPDATE_USERS, usersParsed))
    }
  }
})

const mapState = Vuex.mapState;

const Users = {
	template: '<div><ul><li v-for="user in users">{{user.name}}</li></ul></div>',
  computed: mapState(['users'])
}

new Vue({
	el: '#app',
  store: store,
  computed: {
  	//...mapState(['users']),
    /*users () { // same as mapState
    	return this.$store.state.users;
    }*/
    users () { // also possible with mapGetters(['users'])
    	return this.$store.getters.users
    }
  },
  created () {
  	this.$store.dispatch('getUsers')
  },
  components: {
  	Users
  }
})