+
+ Current Count: {{ counter.count }}
+
+```
+
+#### 更真实的示例
+这是一个更完整的 Pinia API 示例,在 JavaScript 中也使用了类型提示。对于某些开发者来说,可能足以在不进一步阅读的情况下直接开始阅读本节内容,但我们仍然建议你先继续阅读文档的其余部分,甚至跳过此示例,在阅读完所有核心概念之后再回来。
+
+```
+js
+import { defineStore } from 'pinia'
+
+export const useTodos = defineStore('todos', {
+ state: () => ({
+ /** @type {{ text: string, id: number, isFinished: boolean }[]} */
+ todos: [],
+ /** @type {'all' | 'finished' | 'unfinished'} */
+ filter: 'all',
+ // 类型将自动推断为 number
+ nextId: 0,
+ }),
+ getters: {
+ finishedTodos(state) {
+ // 自动补全! ✨
+ return state.todos.filter((todo) => todo.isFinished)
+ },
+ unfinishedTodos(state) {
+ return state.todos.filter((todo) => !todo.isFinished)
+ },
+ /**
+ * @returns {{ text: string, id: number, isFinished: boolean }[]}
+ */
+ filteredTodos(state) {
+ if (this.filter === 'finished') {
+ // 调用其他带有自动补全的 getters ✨
+ return this.finishedTodos
+ } else if (this.filter === 'unfinished') {
+ return this.unfinishedTodos
+ }
+ return this.todos
+ },
+ },
+ actions: {
+ // 接受任何数量的参数,返回一个 Promise 或不返回
+ addTodo(text) {
+ // 你可以直接变更该状态
+ this.todos.push({ text, id: this.nextId++, isFinished: false })
+ },
+ },
+})
+```
+
+
+
+
+
diff --git "a/\351\273\204\345\215\216\351\233\250/2024.05.16-\345\244\215\344\271\240.md" "b/\351\273\204\345\215\216\351\233\250/2024.05.16-\345\244\215\344\271\240.md"
new file mode 100644
index 0000000000000000000000000000000000000000..93c35515e23d9ed0368c026d0649e38da71a36f0
--- /dev/null
+++ "b/\351\273\204\345\215\216\351\233\250/2024.05.16-\345\244\215\344\271\240.md"
@@ -0,0 +1,342 @@
+#### 复习
+```
+在app.js文件里写:
+
+import Koa from 'koa';
+
+import Router from 'koa-router';
+
+import bodyparser from 'koa-bodyparser';
+
+import cors from 'koa2-cors';
+
+import { Sequelize , DataTypes , Op } from 'sequelize';
+
+const app=new Koa();
+
+let router=new Router();
+
+let sequelize=new Sequelize('Good_project','sa','YLJW6195',
+{
+ host:'localhost',
+ dialect:'mssql'
+});
+
+let Goods=sequelize.define('Goods',
+{
+ title:{type:DataTypes.STRING},
+ author:{type:DataTypes.STRING},
+ flag:{type:DataTypes.STRING},
+});
+
+await Goods.sync();
+
+router.get('/goods',async(ctx)=>
+{
+ let keyword = ctx.request.query.keyword || '';
+ keyword = keyword.trim();
+ if (keyword) {
+ let list = await Goods.findAll
+ ({
+ where:
+ {
+ [Op.or]:
+ [
+ { title: { [Op.like]: '%' + keyword + '%' } },
+ { author: { [Op.like]: '%' + keyword + '%' } },
+ { flag: { [Op.like]: '%' + keyword + '%' } },
+ ]
+ }
+ });
+ ctx.body =
+ {
+ code: 1000,
+ data: list,
+ msg: '查找数据成功'
+ };
+ }
+ else {
+ let list = await Goods.findAll();
+ ctx.body =
+ {
+ code: 1000,
+ data: list,
+ msg: '获取所有商品成功'
+ };
+ };
+});
+
+router.get('/goods/:id',async(ctx)=>
+{
+ let id = ctx.params.id * 1 || 0;
+ let row = await Goods.findAll
+ ({
+ where:
+ {
+ id: id
+ }
+ });
+ let res =
+ {
+ code: 1000,
+ data: row[0],
+ msg: `获取指定id为${id}的商品成功`
+ }
+ ctx.body = res;
+});
+
+router.post('/goods',async(ctx)=>
+{
+ let obj = ctx.request.body;
+ let row = await Goods.create(obj);
+ ctx.body =
+ {
+ code: 1000,
+ data: row,
+ msg: '创建商品成功'
+ };
+});
+
+router.put('/goods/:id',async(ctx)=>
+{
+ let id = ctx.params.id * 1 || 0;
+ let obj = ctx.request.body;
+ let item = Goods.findByPk(id);
+ if (item)
+ {
+ let data = await Goods.update(obj,
+ {
+ where: { id: id }
+ });
+ ctx.body =
+ {
+ code: 1000,
+ data: data,
+ msg: '修改成功'
+ };
+ }
+ else
+ {
+ ctx.body =
+ {
+ code: 4000,
+ data: null,
+ msg: '找不到'
+ };
+ };
+});
+
+router.delete('/goods/:id',async(ctx)=>
+{
+ let id = ctx.params.id || 0;
+ let row = await Goods.findByPk(id);
+ if (row) {
+ Goods.destroy
+ ({
+ where: { id: id }
+ });
+ ctx.body =
+ {
+ code: 1000,
+ msg: '删除成功'
+ };
+ }
+ else {
+ ctx.body =
+ {
+ code: 4000,
+ msg: '找不到你要删除的商品,请确认后重试'
+ };
+ };
+});
+
+// 解决跨域问题
+app.use(cors());
+
+// 解决post、put请求拿到表单数据的问题
+app.use(bodyparser());
+
+// 解决路由问题
+app.use(router.routes());
+
+let port=3000;
+
+app.listen(port);
+
+console.log(`http服务器运行与如下地址:http://localhost:${port}`);
+在App.vue文件里写:
+
+
+
+