Todo List with Vue.js and Vuex

功能介紹

實作的功能有

程式碼在這裡

Demo

npm run dev

Todo List with Vue.js and Vuex

說明

主要使用 Vue、Vuex 和 Bootstrap Vue

程式流程

  1. 使用者與畫面互動,發送 dispatch 至 action
  2. 藉由 action 發送 commit 至 mutation
  3. 在 mutation 改變 state
  4. 更新畫面

檔案結構

Todo List with Vue.js and Vuex

主要分為

遇到的問題 / 解法

<input>上綁定v-model,導致在 mutation 以外的地方改變 state

解法:使用 event handler 或 watch。

在更新 todo 的文字時,過去都是利用v-model雙向綁定的特性來改變資料,但在此使用 vuex 統一管理狀態,因此只能經由 action 發送 commit,交由 mutation 來改變資料。

當使用者編輯 todo 文字,按下 enter 鍵結束編輯後,將 todo 的 ID 和使用者輸入的字串包成一個 object,由 method 發送 dispatch (components/TodoList.vue)給 action。

updateTodo: function(index, content) {
  this.$store.dispatch('updateTodo', {
    index: index,
    content: content
  })
}

由 action 發送 commit (actions.js) 至 mutation,其中將得到的資料包成 payload 也一起送過去。

export const updateTodo = ({ commit }, payload) => {
  commit(types.UPDATETODO, payload);
};

由 mutation 更新 state (mutations.js)

[types.UPDATETODO](state, payload) {
  state.todos[payload.index].text = payload.content;
}

備註:在這裡$event.target.value無法直接傳送資料到 action,必須在 view 使用 $store.dispatch,並將資料由 payload 帶給 action 和 mutation。

什麼是 Scoped CSS?

<style>標籤有 scoped 屬性時,樣式就只能作用於當前的元件。在同一個元件內,可以同時有作用域和無作用域的樣式。

如何引入外部樣式檔案?

解法


參考資料 / 推薦閱讀


vue.js vuex todo list Bootstrap