Vue3案例-todoMVC-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')

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

import useTodosStore from './modules/todos'
export default function useStore() {
  return {
    todos: useTodosStore(),
  }
}

<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>

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

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

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

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

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

<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>

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

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

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

<span class="todo-count">
  <strong>{{ todos.leftCount }}</strong> item left
</span>
<button class="clear-completed" @click="todos.clearTodo">
  Clear completed
</button>

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

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

<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>

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
  }
},

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

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

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