List display function
(1) Introduce pinia in main.js
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) Create a new file 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) Create a new file store/index.js
import useTodosStore from './modules/todos'
export default function useStore() {
return {
todos: useTodosStore(),
}
}
(4) Render in 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>
Modify task status
Goal: complete task modify status
(1) Provide methods in actions
actions: {
changeDone(id) {
const todo = this.list.find((item) => item.id === id)
todo.done = !todo.done
},
},
(2) Register events in components
<input
class="toggle"
type="checkbox"
:checked="item.done"
@change="todos.changeDone(item.id)"
/>
delete task
Goal: Complete the task delete function
(1) Provide methods in actions
actions: {
delTodo(id) {
this.list = this.list.filter((item) => item.id !== id)
},
},
(2) Register events in components
<button class="destroy" @click="todos.delTodo(item.id)"></button>
add task
Goal: Complete the task to add functionality
(1) Provide methods in actions
actions: {
addTodo(name) {
this.list.unshift({
id: Date.now(),
name,
done: false,
})
},
},
(2) Register events in components
<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>
Select all and reverse selection
Complete the selection and reverse selection functions of todos
(1) Provide computed properties in getters and methods in 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) Used in components
<input
id="toggle-all"
class="toggle-all"
type="checkbox"
:checked="todos.isCheckAll"
@change="todos.checkAll(!todos.isCheckAll)"
/>
Bottom statistics and clearing function
Goal: Complete the statistics and clearing functions at the bottom
(1) Provide computed properties in 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) Used in components
<span class="todo-count">
<strong>{
{
todos.leftCount }}</strong> item left
</span>
<button class="clear-completed" @click="todos.clearTodo">
Clear completed
</button>
Bottom filter function
(1) Provide data
state: () => ({
filters: ['All', 'Active', 'Completed'],
active: 'All',
}),
(2) Provide actions
actions: {
changeActive(active) {
this.active = active
},
},
(3) Render in 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) Provide computed properties
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) Rendering in components
<ul class="todo-list">
<li
:class="{ completed: item.done }"
v-for="item in todos.showList"
:key="item.id"
>
Persistence
(1) Subscribe to data changes in the store
const {
todos } = useStore()
todos.$subscribe(() => {
localStorage.setItem('todos', JSON.stringify(todos.list))
})
(2) Obtain from the local cache when obtaining data
state: () => ({
list: JSON.parse(localStorage.getItem('todos')) || [],
}),