列表展示功能

（1） 在main.js中引入pinia

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia'
import './styles/base.css'
import './styles/index.css'

const pinia = createPinia()
createApp(App).use(pinia).mount('#app')

(2)新建文件 store/modules/todos.js

import { defineStore } from 'pinia'

const useTodosStore = defineStore('todos', {
  state: () => ({
    list: [
      {
        id: 1,
        name: '吃饭',
        done: false,
      },
      {
        id: 2,
        name: '睡觉',
        done: true,
      },
      {
        id: 3,
        name: '打豆豆',
        done: false,
      },
    ],
  }),
})

export default useTodosStore

(3)新建文件store/index.js

import useTodosStore from './modules/todos'

export default function useStore() {
  return {
    todos: useTodosStore(),
  }
}

(4)在src/components/TodoMain.vue中渲染

<script setup>
import useStore from '../store'

const { todos } = useStore()
</script>

<template>
  <section class="main">
    <input id="toggle-all" class="toggle-all" type="checkbox" />
    <label for="toggle-all">Mark all as complete</label>
    <ul class="todo-list">
      <li
        :class="{ completed: item.done }"
        v-for="item in todos.list"
        :key="item.id"
      >
        <div class="view">
          <input class="toggle" type="checkbox" :checked="item.done" />
          <label>{{ item.name }}</label>
          <button class="destroy"></button>
        </div>
        <input class="edit" value="Create a TodoMVC template" />
      </li>
    </ul>
  </section>
</template>

修改任务状态

目标：完成任务修改状态

(1)在actions中提供方法

actions: {
  changeDone(id) {
    const todo = this.list.find((item) => item.id === id)
    todo.done = !todo.done
  },
},

(2)在组件中注册事件

<input
  class="toggle"
  type="checkbox"
  :checked="item.done"
  @change="todos.changeDone(item.id)"
/>

删除任务

目标：完成任务删除功能

（1）在actions中提供方法

actions: {
  delTodo(id) {
    this.list = this.list.filter((item) => item.id !== id)
  },
},

(2)在组件中注册事件

<button class="destroy" @click="todos.delTodo(item.id)"></button>

添加任务

目标：完成任务添加功能

（1）在actions中提供方法

actions: {
  addTodo(name) {
    this.list.unshift({
      id: Date.now(),
      name,
      done: false,
    })
  },
},

(2)在组件中注册事件

<script setup>
import { ref } from 'vue'
import useStore from '../store'
const { todos } = useStore()
const todoName = ref('')
const add = (e) => {
  if (e.key === 'Enter' && todoName.value) {
    todos.addTodo(todoName.value)
    // 清空
    todoName.value = ''
  }
}
</script>

<template>
  <header class="header">
    <h1>todos</h1>
    <input
      class="new-todo"
      placeholder="What needs to be done?"
      autofocus
      v-model="todoName"
      @keydown="add"
    />
  </header>
</template>

全选反选功能

完成todos的全选和反选功能

（1）在getters中提供计算属性，在actions中提供方法

const useTodosStore = defineStore('todos', {

  actions: {
 
    checkAll(value) {
      this.list.forEach((item) => (item.done = value))
    },
  },
  getters: {
    // 是否全选
    isCheckAll() {
      return this.list.every((item) => item.done)
    },
  },
})

（2）在组件中使用

<input
  id="toggle-all"
  class="toggle-all"
  type="checkbox"
  :checked="todos.isCheckAll"
  @change="todos.checkAll(!todos.isCheckAll)"
/>

底部统计与清空功能

目标：完成底部的统计与清空功能

（1）在getters中提供计算属性

const useTodosStore = defineStore('todos', {

  actions: {
    clearTodo() {
      this.list = this.list.filter((item) => !item.done)
    },
  },
  getters: {
    leftCount() {
      return this.list.filter((item) => !item.done).length
    },
  },
})

（2）在组件中使用

<span class="todo-count">
  <strong>{{ todos.leftCount }}</strong> item left
</span>

<button class="clear-completed" @click="todos.clearTodo">
  Clear completed
</button>

底部筛选功能

（1）提供数据

state: () => ({
  filters: ['All', 'Active', 'Completed'],
  active: 'All',
}),

（2）提供actions

actions: {

  changeActive(active) {
    this.active = active
  },
},

（3）在footer中渲染

<ul class="filters">
  <li
    v-for="item in todos.filters"
    :key="item"
    @click="todos.changeActive(item)"
  >
    <a :class="{ selected: item === todos.active }" href="#/">{{ item }}</a>
  </li>
</ul>

(4)提供计算属性

showList() {
  if (this.active === 'Active') {
    return this.list.filter((item) => !item.done)
  } else if (this.active === 'Completed') {
    return this.list.filter((item) => item.done)
  } else {
    return this.list
  }
},

（5）组件中渲染

<ul class="todo-list">
  <li
    :class="{ completed: item.done }"
    v-for="item in todos.showList"
    :key="item.id"
  >

持久化

（1）订阅store中数据的变化

const { todos } = useStore()
todos.$subscribe(() => {
  localStorage.setItem('todos', JSON.stringify(todos.list))
})

（2）获取数据时从本地缓存中获取

state: () => ({
  list: JSON.parse(localStorage.getItem('todos')) || [],
}),