今天目標：

1. 使用者需要一個簡單的待辦事項清單
2. 希望有新增待辦事項的功能

先從資料開始設計

[
  {
  	key: '修改, 刪除做搜尋資料使用'
    content: '待辦事項清單內容描述',
    done: '紀錄事項是否已經做完'
  }
]

mutations.js (state)

export const state = {
  count: 0,
  todos: [
    { key: 0, content: 'vue.js 2.0', done: true },
	{ key: 1, content: 'vuex 2.0', done: false },
	{ key: 2, content: 'vue-router 2.0', done: false },
	{ key: 3, content: 'vue-resource 2.0', done: false },
	{ key: 4, content: 'webpack', done: false }
  ]
};

getter

設計取 list 的函式，直接 return todos

export const getTodos = state => state.todos;

page/todo.vue

<template>
  <div class="container">
    <h2>Todo List:</h2>
    <ul>
	  <!-- 使用 for render todos -->
      <li v-for="(todo, index) in todos">
	    <!--  提取 content 顯示 -->
        {{ todo.content }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  computed: mapGetters({
  	// 使用取 list 的函式，將資料存在 todos
    todos: 'getTodos',
  }),
}
</script>

到這邊已經完成取得 todo list 的資料了。

新增 todo

<template>
  <div class="container">
    <h2>Todo List:</h2>
    <div>
      <!-- 
        加一個 input 用來新增 todo
        希望按 enter 也可以增加 todo
        在 Vue 裡面要捕捉 "按鍵事件" 可以使用 @keyup.[鍵位碼]
        加入 @keyup.enter(修飾) 也等於 @keyup.13
      -->
      <input
        type="text"
        placeholder="add Todo.."
        v-model="newTodo"
        @keyup.enter="actionAddTodo" />
      <!-- 按鈕增加 todo -->
      <button @click="actionAddTodo">add todo</button>
    </div>
    <ul>
      <li v-for="(todo, index) in todos">
        {{ todo.content }}
      </li>
    </ul>
  </div>
</template>

<script>
import { mapGetters, mapActions } from 'vuex'

export default {
  data() {
    return {
      newTodo: ''
    }
  },
  computed: mapGetters({
    todos: 'getTodos',
  }),
  methods: {
    ...mapActions([
        'addTodo', // 方法一、先引入 
    ]),
    actionAddTodo () {
      // 方法一、使用
      // this.addTodo( this.newTodo );
      
      // 這邊示範第二種方法，不需要先引入 action 可以直接呼叫（調用）。
      // 使用 this.$store.dispatch( action(String), value );
      this.$store.dispatch('addTodo', this.newTodo);

      // 清除 data 中 input 的 value
      this.newTodo = '';
    }
  }
}
</script>

• 更多的 keyCodes: Vue 使用與自訂 keyCodes
• 更多的 dispatch: vuex action dispatch

action.js

export const addTodo = ({ commit }, newTodo) => {
  // 直接將 newTodo 傳遞給 mutation
  commit(types.ADD_TODO, newTodo);
}

mutations.js

// 這邊簡單做一個 todo 的流水 key
// 預設值是 todos 的長度
let todoKey = state.todos.length;

export const mutations = {
  [types.ADD_TODO] (state, newTodo) {
    // todos 是一個 Array 所以 push 一個同結構的 Object
    state.todos.push({
      key: todoKey, // 流水 key
      content: newTodo, // 新 todo 的內容
      done: false // 預設當然是未做完
    });
	
	// 流水 key +1
    todoKey++;
  },
}

完成了 CRUD 的 create & read

github 完整範例：

實作小範例入門 Vue & Vuex 2.0 - github 完整範例

使用 git checkout 切換每天範例。