1. 程式人生 > >vue part5.2 vuex todolist 改寫

vue part5.2 vuex todolist 改寫

fir cte oca ext bootstrap reat box css position

代碼

main部分

index.html

技術分享圖片
<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="stylesheet" href="./static/css/bootstrap.css">
    <title>vue_demo</title>

    <style>
      .router
-link-active { color: red !important; } </style> </head> <body> <div id="app"> </div> <!--app --> </body> </html>
View Code

src/base.css

技術分享圖片
body {
  background: #fff;
}

.btn {
  display: inline-block;
  padding: 4px 12px;
  margin
-bottom: 0; font-size: 14px; line-height: 20px; text-align: center; vertical-align: middle; cursor: pointer; box-shadow: inset 0 1px 0 rgba(225, 225, 225, 0.2), 0 1px 2px rgba(0, 0, 0,0.15); border-radius: 4px; } .btn-danger { color: #fff; background-color: #da4f49; border: 1px solid #bd362f;
} .btn-danger:hover { color: #fff; background-color: #bd362f; } .btn:focus { outline: none; }
View Code

src/main.js

技術分享圖片
/**
 * Created by infaa on 2018/9/19.
 */
import Vue from vue
import App from ./components/App
import store from ./store
import ./base.css
/* eslint-disable no-new */

new Vue({
  el: #app,
  render: h => h(App),
  store
})
View Code

工具部分

src/util/storageUtil.js

技術分享圖片
/**
 * Created by infaa on 2018/9/20.
 */
const TODO_KEY = todos_key
export default {
  saveTodos (value) {
    window.localStorage.setItem(TODO_KEY, JSON.stringify(value))
  },
  readTodos () {
    return JSON.parse(window.localStorage.getItem(TODO_KEY) || [])
  }
}
View Code

store 部分 (vuex)

src/store/action.js

技術分享圖片
/**
 * Created by infaa on 2018/9/22.
 */
import {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, CLEAR_ALL_COMPLETED, RECEIVE_TODOS} from ./mutation-types
import storeageUtil from ../util/storageUtil
export default {
  addTodo ({commit}, todo) {
    commit(ADD_TODO, {todo})
  },
  deleteTodo ({commit}, index) {
    commit(DELETE_TODO, {index})
  },
  selectAllTodos ({commit}, check) {
    commit(SELECT_ALL_TODOS, {check})
  },
  clearALLCompleted ({commit}) {
    commit(CLEAR_ALL_COMPLETED)
  },
  reqTodos ({commit}) {
    // 模擬異步獲取延遲1秒
    setTimeout(() => {
      const todos = storeageUtil.readTodos()
      commit(RECEIVE_TODOS, todos)
    }, 1000)
  }
}
View Code

src/store/getters.js

技術分享圖片
/**
 * Created by infaa on 2018/9/22.
 */
export default {
  totalCount (state) {
    return state.todos.length
  },
  completeCount (state) {
    return state.todos.reduce((preTotal, todo) => {
      return preTotal + (todo.complete ? 1 : 0)
    }, 0)
  },
  isAllSelected (state, getters) {
    return getters.totalCount === getters.completeCount && state.todos.length > 0
  }
}
View Code

src/store/index.js

技術分享圖片
/**
 * Created by infaa on 2018/9/22.
 */
import Vue from vue
import Vuex from vuex
import state from ./state
import mutations from ./mutations
import actions from ./actions
import getters from ./getters

Vue.use(Vuex)

/* eslint-disable new-cap */

export default new Vuex.Store({
  state,
  mutations,
  actions,
  getters
})
View Code

src/store/mutation-types.js

技術分享圖片
/**
 * Created by infaa on 2018/9/22.
 * mutation 名稱常量
 */
export const ADD_TODO = add_todo
export const DELETE_TODO = delete_todo
export const SELECT_ALL_TODOS = select_all_todos
export const CLEAR_ALL_COMPLETED = clear_all_completed
export const RECEIVE_TODOS = receive_todos // 接收todos
View Code

src/store/mutation.js

技術分享圖片
/**
 * Created by infaa on 2018/9/22.
 */
import {ADD_TODO, DELETE_TODO, SELECT_ALL_TODOS, CLEAR_ALL_COMPLETED, RECEIVE_TODOS} from ./mutation-types
export default {
  [ADD_TODO] (state, {todo}) {
    state.todos.unshift(todo)
  },
  [DELETE_TODO] (state, {index}) {
    state.todos.splice(index, 1)
  },
  [SELECT_ALL_TODOS] (state, {check}) {
    state.todos.forEach(todo => (todo.complete = check))
  },
  [CLEAR_ALL_COMPLETED] (state) {
    state.todos = state.todos.filter(todo => (!todo.complete))
  },
  [RECEIVE_TODOS] (state, todos) {
    state.todos = todos
  }
}
View Code

src/store/state.js

技術分享圖片
/**
 * Created by infaa on 2018/9/22.
 */
export default {
  todos: []

}
View Code

組件部分

components/App.vue

技術分享圖片
<template>
<div class="todo-container">
    <div  class="todo-wrap">
      <TodoHeader></TodoHeader>
      <TodoList></TodoList>
      <TodoFooter></TodoFooter>
    </div>
  </div>
</template>

<script>
import TodoHeader from ./TodoHeader.vue
import TodoList from ./TodoList.vue
import TodoFooter from ./TodoFooter.vue
// import storageUtil from ../util/storageUtil.js
export default {
  mounted () {
    // 發送命令到acitong,模擬異步獲取todos數據,由action處理
    this.$store.dispatch(reqTodos)
  },
  components: {
    TodoHeader,
    TodoList,
    TodoFooter
  }
//  methods: {
//
//  },
//  watch: {
//    todos: {
//      deep: true,
//      handler: storageUtil.saveTodos
//    }
//
//  }
}
</script>

<style>
 .todo-container {
    width: 600px;
    margin: 0 auto;
    }
    .todo-container .todo-wrap {
      padding: 10px;
      border: 1px solid #ddd;
      border-radius: 5px;
    }
</style>
View Code

components/TodoFooter.vue

技術分享圖片
<template>
      <div class="todo-footer">
        <label>
          <input type="checkbox" v-model="isAllChecked">
        </label>
        <span>
          <span>已完成{{completeCount}}</span>/全部{{totalCount}}
        </span>
        <button class="btn btn-danger" v-show="completeCount" @click="clearALLCompleted">清除已完成任務</button>
      </div>
</template>

<script>
import {mapGetters, mapActions} from vuex
export default {
  computed: {
    ...mapGetters([totalCount, completeCount, isAllSeleted]),
    isAllChecked: {
      get () {
        return this.$store.getters.isAllSelected
      },
      set (value) {
        this.$store.dispatch(selectAllTodos, value)
      }
    }
  },
  methods: {
    ...mapActions([clearALLCompleted])
  }

}

</script>

<style>
  .todo-footer {
    height: 40px;
    line-height: 40px;
    padding-left: 6px;
    margin-top: 5px;
  }
  .todo-footer label {
    display: inline-block;
    margin-right: 20px;
    cursor: pointer;
  }
  .todo-footer label input {
    position: relative;
    top: -1px;
    vertical-align: middle;
    margin-right: 5px;
  }
  .todo-footer button {
    float: right;
    margin-top: 5px;
  }
</style>
View Code

components/TodoHeader.vue

技術分享圖片
<template>
      <div class="todo-header">
        <input type="text" placeholder="請輸入你的任務名稱,按回車鍵確認"
               v-model="inputTodo" @keyup.enter="addItem">
      </div>
</template>

<script>
export default {
  data () {
    return {
      inputTodo: ‘‘
    }
  },
  methods: {
    addItem () {
      const title = this.inputTodo.trim()
      if (!title) {
        alert(title Kong)
        return
      }
      const todo = {
        title,
        complete: false
      }
      this.$store.dispatch(addTodo, todo)
      this.inputTodo = ‘‘ // 註意這裏要操作this對象而不是函數內局部變量title
      // 驗證合法性  生成對象  添加  還原
    }
  }
}

</script>

<style>
  .todo-header input {
    width: 560px;
    height: 28px;
    font-size: 14px;
    border: 1px solid #ccc;
    border-radius: 4px;
    padding: 4px 7px;
  }
  .todo-header input:focus {
    outline: none;
    border-color: rgba(82, 168, 236, 0.8);
    box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.75), 0 0 8px rgba(82, 168, 236, 0.5);
  }
</style>
View Code

components/TodoItem.vue

技術分享圖片
<template>
        <li :style="{background: bgColor}" @mouseenter="handleEnter(true)" @mouseleave="handleEnter(false)">
          <label>
            <input type="checkbox" v-model="todo.complete">
            <span>{{todo.title}}</span>
          </label>
          <button class="btn btn-danger" @click="deleteItem" v-show="isShow">刪除</button>
        </li>
</template>

<script>
export default {
  props: {
    todo: Object,
    index: Number
  },
  data () {
    return {
      isShow: false,
      bgColor: white
    }
  },
  methods: {
    deleteItem () {
      const index = this.index
      const todo = this.todo
      if (window.confirm(`刪除${todo.title}`)) {
        this.$store.dispatch(deleteTodo, index)
      }
    },
    handleEnter (isEnter) {
      if (isEnter) {
        this.isShow = true
        this.bgColor = grey
      } else {
        this.isShow = false
        this.bgColor = white
      }
    }
  }
}

</script>

<style>
  /*item*/
  li {
    list-style: none;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-bottom: 1px solid #ddd;
  }
  li label {
    /*float: left;*/
    cursor: pointer;
  }
  li label li input {
    vertical-align: middle;
    margin-right: 6px;
    position: relative;
    top: -1px;
  }
  li button {
    float: right;
    display: none;
    margin-top: 3px;
  }
  li:before {
    content: initial;
  }
  li:last-child {
    border-bottom: none;
  }
</style>
View Code

components/TodoList.vue

技術分享圖片
<template>
      <ul class="todo-main">
        <TodoItem v-for="(todo,index) in todos" :todo="todo" :key="index" :index="index"></TodoItem>
      </ul>
</template>

<script>
import {mapState} from vuex
import TodoItem from ./TodoItem.vue
import storeageUtil from ../util/storageUtil
export default {
  components: {
    TodoItem
  },
  computed: {
    ...mapState([todos])
  },
  watch: {
    todos: {
      deep: true,
      handler: storeageUtil.saveTodos
    }
  }
}

</script>

<style>
  .todo-main {
    margin-left: 0px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding: 0px;
  }
  .todo-empty {
    height: 40px;
    line-height: 40px;
    border: 1px solid #ddd;
    border-radius: 2px;
    padding-left: 5px;
    margin-top: 10px;
  }
</style>
View Code

vue part5.2 vuex todolist 改寫