Vue 2.x 实现方案

在vue2中实现

我们以 todoList 为案例展示如何在Vue2中实现派发器思想

编写视图

先创建所需要的文件

index.vue

<template>
  <div>
    <td-title :title="title" />
    <td-form />
    <td-list :todoData="todoData" />
  </div>
</template>
<script>
import TdTitle from "./Title";
import TdForm from "./Form";
import TdList from "./List";
export default {
  name: "TodoList",
  components: {
    TdTitle,
    TdForm,
    TdList,
  },
  data() {
    return {
      title: "Todo List",
      todoData: [],
    };
  },
};
</script>

Title.vue

<template>
  <h1>{{ title }}</h1>
</template>
<script>
export default {
  name: "TdTitle",
  props: {
    title: String,
  },
};
</script>

Form.vue

<template>
  <div>
    <form>
      <input
        type="text"
        v-model.trim="todoText"
        placeholder="input what you wanna add!"
      />
    </form>
  </div>
</template>
<script>
export default {
  name: "TdForm",
  data() {
    return {
      todoText: "",
    };
  },
};
</script>

List > index.vue

<template>
  <div>
    <ul>
      <list-item
        v-for="item in todoData"
        :key="item.id"
        :item="item"
      />
    </ul>
  </div>
</template>
<script>
import ListItem from "./ListItem";
export default {
  name: "TdList",
  components: {
    ListItem,
  },
  props: {
    todoData: Array,
  },
};
</script>

List > ListItem.vue

<template>
  <li>
    <input
      type="checkbox"
      :checked="item.completed"
    />
    <span :class="{ completed: item.completed }">
      {{ item.text }}
    </span>
    <button>删除</button>
  </li>
</template>
<script>
export default {
  name: "ListItem",
  props: {
    item: Object,
  },
};
</script>
<style>
.completed {
  text-decoration: line-through;
}
</style>

编写好组件后我们就可以去派发器所需要的逻辑了

编写逻辑

首先在 src 下创建一个 actions 用来存放事件触发 type

todoList.js

export const
  ADD = 'ADD',            // 添加待办的type
  REMOVE = 'REMOVE',      // 删除待办的type
  COMPLETED = 'COMPLETED' // 切换待办状态的type

再创建一个 reducers 文件夹来存放所需的逻辑实现

export default function todoReducer(data) {
  /**
   * 添加待办事件
   * @param newItem 添加的事项数据
   * @returns 拼接好之后的待办列表
   */
  function addItem(newItem) {
    return data.concat(newItem)
  }
  /**
   * 根据id删除对应的待办
   * @param id 需要删除的待办id
   * @returns 删除之后的待办列表
   */
  function removeItem(id) {
    return data.filter(item => item.id !== id)
  }
  /**
   * 切换代办事项状态
   * @param id 需要切换状态待办事项的id
   * @returns 切换待办事项状态之后的待办列表
   */
  function changeCompleted(id) {
    return data.map(item => {
      if (item.id === id) {
        item.completed = !item.completed
      }
      return item
    })
  }
  return {
    addItem,
    removeItem,
    changeCompleted,
  }
}

最后创建一个 dispatchers 文件夹来存放派发器

export default function todoReducer(data) {
  /**
   * 添加待办事件
   * @param newItem 添加的事项数据
   * @returns 拼接好之后的待办列表
   */
  function addItem(newItem) {
    return data.concat(newItem)
  }
  /**
   * 根据id删除对应的待办
   * @param id 需要删除的待办id
   * @returns 删除之后的待办列表
   */
  function removeItem(id) {
    return data.filter(item => item.id !== id)
  }
  /**
   * 切换代办事项状态
   * @param id 需要切换状态待办事项的id
   * @returns 切换待办事项状态之后的待办列表
   */
  function changeCompleted(id) {
    return data.map(item => {
      if (item.id === id) {
        item.completed = !item.completed
      }
      return item
    })
  }
  return {
    addItem,
    removeItem,
    changeCompleted,
  }
}