Vuex Todo App Example

by wakaba_bbq

HTML

<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/vuex"></script>
<div id="app"></div>

<!-- App.vue のテンプレート部分 -->
<template id="app-template">
	<div>
		<h2>タスク一覧</h2>
		<ul>
			<li v-for="task in tasks" v-bind:key="task.id">
				<input type="checkbox" v-bind:checked="task.done">
				{{ task.name }}
			</li>
		</ul>
	</div>
</template>

JavaScript

// store.js
const store = new Vuex.Store({
	state: {
		tasks: [
			{
				id: 1,
				name: '牛乳を買う',
				done: false
			},
			{
        id: 2,
        name: '本を買う',
        done: false
      }
		]
	}
})


// App.vue の JavaScript 部分
const App = {
	template: '#app-template',
		computed: {
			tasks () {
				return this.$store.state.tasks
			}
		}
}

// main.js
new Vue({
  el: '#app',
  store,
  render: h => h(App)
})