VueX mini demo (with feesh)

by Admiral Potato

HTML

<script src="https://unpkg.com/[email protected]/dist/vue.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vuex.js"></script>
<div id="app">
	<h1>Hello</h1>
	<button
		@click="addRandomWord"
	>addRandomWord</button>
	<button
		@click="$store.dispatch('addFish', 3)"
	>$store.dispatch('addFish', 3)</button>
	<button
		@click="addFish(5)"
	>addFish(5)</button>
	<pre
		class="datas"
	>datasLength: {{datasLength}}<br />datas: {{datas}}</pre>
	<pre
		class="datas"
	>long store feesh:{{$store.state.fish}}</pre>
	<pre
		class="datas"
	>longhand feesh:{{$store.getters.feesh}}</pre>
	<pre
		class="shortcut"
	>shortcut feesh:{{feesh}}</pre>
</div>

CSS

html, body {
	font-size: 24px;
	height: 100%;
}

* {
	margin: 0;
	padding: 0;
	font-family: inherit;
}

body {
	font-family: monospace;	
}

JavaScript

Vue.use(Vuex)

var store = new Vuex.Store({
	state: {
		fish: 0
	},
	getters: {
		feesh (state) {
			return state.fish
		}
	},
	mutations: {
		ADD_FISH (state, fishToAdd) {
			state.fish += fishToAdd
		}
	},
	actions: {
		addFish (context, fishToAdd) {
			context.commit('ADD_FISH', fishToAdd)
		}
	}
})

const fishMappersMixin = {
	computed: Vuex.mapGetters([
		'feesh',
	]),
	methods: Vuex.mapActions([
		'addFish'
	])
}

var app = new Vue({
	store,
	mixins: [fishMappersMixin],
	el: '#app',
	data: {
		datas: [
			'look',
			'how',
			'many',
			'datas',
			'here'
		]
	},
	computed: {
		datasLength () {
			return this.datas.length
		}
	},
	methods: {
		addRandomWord () {
			const randomWords = Object.keys(window)
			this.datas.push(
				randomWords[
					Math.floor(Math.random() * randomWords.length)
				]
			)
		}
	},
})