用vue+elementUI+vuex代码实现待办事项的页面 包含以下功能：一、清空所有已办事项 二、标记所有待办为已办 三、标记所有已办为待办

以下是一个基于Vue、ElementUI和Vuex的待办事项页面的代码实现，其中包含清空所有已办事项、标记所有待办为已办和标记所有已办为待办三个功能。

HTML部分：

<template>
  <div>
    <h1>待办事项</h1>
    <div class="todo-list">
      <div class="todo-item" v-for="(item, index) in todoList" :key="item.id">
        <el-checkbox v-model="item.done">{{ item.content }}</el-checkbox>
        <el-button type="text" size="small" @click="deleteItem(index)">删除</el-button>
      </div>
    </div>
    <div class="todo-action">
      <el-button type="primary" @click="clearDone">清空已办事项</el-button>
      <el-button type="primary" @click="markAllDone">标记所有待办为已办</el-button>
      <el-button type="primary" @click="markAllTodo">标记所有已办为待办</el-button>
    </div>
  </div>
</template>

JavaScript部分：

<script>
import { mapState, mapMutations } from 'vuex';

export default {
  data() {
    return {
      newTodo: '',
    };
  },
  computed: {
    ...mapState({
      todoList: state => state.todoList,
    }),
  },
  methods: {
    ...mapMutations(['addTodo', 'deleteTodo', 'clearDoneTodos', 'markAllDone', 'markAllTodo']),
    addNewTodo() {
      if (this.newTodo.trim() === '') return;
      this.addTodo({
        content: this.newTodo,
        done: false,
        id: new Date().getTime(),
      });
      this.newTodo = '';
    },
    deleteItem(index) {
      this.deleteTodo({
        index,
      });
    },
    clearDone() {
      this.clearDoneTodos();
    },
  },
};
</script>

其中，`todoList`是从Vuex中获取的待办事项列表，`addTodo`、`deleteTodo`、`clearDoneTodos`、`markAllDone`和`markAllTodo`是从Vuex中获取的五个mutation方法。`addNewTodo`方法用于添加新的待办事项，`deleteItem`方法用于删除指定的待办事项，`clearDone`方法用于清空所有已办事项。

对于标记所有待办为已办和标记所有已办为待办两个功能，我们可以在Vuex的mutation中添加两个方法，分别用于将所有待办标记为已办和将所有已办标记为待办。具体实现如下：

const mutations = {
  ...
  markAllDone(state) {
    state.todoList.forEach(item => {
      item.done = true;
    });
  },
  markAllTodo(state) {
    state.todoList.forEach(item => {
      item.done = false;
    });
  },
};

这样，在页面中点击“标记所有待办为已办”和“标记所有已办为待办”按钮时，就可以调用这两个mutation方法来完成对应的操作。