Vue-16-前端框架Vue之应用基础集中式状态管理pinia(一)
文章目录
- 1 Pinia
- 2 示例效果
- 2.1 App.vue(根组件)
- 2.2 Count.vue
- 2.3 LoveTalk.vue(使用axios)
- 3 搭建pinia环境
- 3.1 main.ts
- 3.2 开发者工具
- 4 存储和读取数据
- 4.1 Count.ts
- 4.2 Count.vue
- 4.3 loveTalk.ts
- 4.4 LoveTalk.vue
- 5 修改数据的三种方式
- 5.1 第一种和第二种修改方式
- 5.1.1 Count.ts
- 5.1.2 Count.vue
- 5.2 第三种修改方式
- 5.2.1 Count.ts
- 5.2.2 Count.vue
- 5.2.3 loveTalk.ts
- 5.2.4 LoveTalk.vue
使用pinia存储和读取数据，介绍三种修改数据的方式：单个修改、批量修改、使用actions中的自定义动作修改。
1 Pinia
Pinia的官网地址
符合直觉的状态管理库。
集中式状态(数据)管理。
React->redux
vue2->vuex
vue3->pinia
作用：用于多个组件共享数据。
2 示例效果
npm install axios
npm install nanoid，生成随机Id。
2.1 App.vue(根组件)
<template