Vue3 ----- pinia

1. pinia

pinia ---- 集中式状态管理– 将共享的数据交给pinia进行管理。
随机生成id 的库：

1. uuid
2. nanoid – 调用nanoid()即可生成id

1.1 搭建pinia 环境

npm i pinia

main.ts

// 引入pinia
import {createPinia} from "pinia"

const app = createApp(App)

// 创建pinia
const pinia = createPinia()
// 安装pinia
app.use(pinia)

1.2 存储 + 读取数据

1. Store是一个保存：状态、业务逻辑的实体，每个组件都可以读取、写入它。
2. 它有三个概念：state、getter、action,相当于组件中的：data、computed和methods。
3. 具体编码：src/store/xxxx.ts

在reactive定义的数据内部定义ref数据a，不需要.value就可以获取a。
useCountStore：

1.3 修改数据的三种方式

1. 直接修改

countStore.sum +=1

2. 批量修改 ----- 多个数据同时修改

countStore.$patch({
    sum: 0,
    address:'China'
})

3. 借助action

actions: {
        increment(value: number) {  
            return value+1
        }
    },

修改数据：

countStore.increment(countStore.sum)

action存在的意义：代码的复用性

1.4 storeToRefs

我们对pinia传递过来的数据解构赋值，显现得到的数据失去了响应式；如果我们使用toRefs把数据包裹起来，会将全部数据都转换成ref 形式，其中包含一些函数，这有些没必要；pinia提供了storeToRefs，可以将state中的数据转换成ref形式。
state和getters中的数据获取方式一样！

1.5 $subscribe

跟watch有点相似，在pinia存储的数据发生改变后$subscribe就会被调用。

刷新数据不丢失：
存储：

foodStore.$subscribe((mutate,state)=>{
    localStorage.setItem('foodList',JSON.stringify(state.foodList))
})

获取：

state() {
        return {
            foodList: JSON.parse(localStorage.getItem('foodList') as string) || []
        }
    }

6. store组合式写法

选项式写法：

组合式写法：（需要return）