Vue3+Pinia 20分钟快速上手

自我记录
1.Pinia 是一个状态管理工具，它和 Vuex 一样为 Vue 应用程序提供共享状态管理能力。
2.语法和 Vue3 一样，它实现状态管理有两种语法：选项式API 与 组合式API，我们学习组合式API语法。
3.它也支持 Vue2 也支持 devtools，当然它也是类型安全的，支持 TypeScript
4.可以创建多个全局仓库，不用像 Vuex 一个仓库嵌套模块，结构复杂。
5.管理数据简单，提供数据和修改数据的逻辑即可，不像Vuex需要记忆太多的API。
6.Pinia 是一个简单实用的状态管理工具,大小仅有1KB
7.Pinia 官方文档

image.png

yarn add pinia
# 或者使用 npm
npm install pinia

2.导入，实例化，当做插件使用，和其他插件使用套路相同 /src/main.ts

import { createApp } from 'vue'
// 1. 导入创建pinia的函数
import { createPinia } from 'pinia'
import App from './App.vue'
// 2. 创建pinia插件实例
const pinia = createPinia()
const app = createApp(App)
// 3. 使用插件
app.use(pinia)
app.mount('#app')

3.创建仓库&使用仓库 /src/stores/counter.ts

import { defineStore } from "pinia"
// 创建仓库
// 1.id 是仓库的唯一标识，一般文件的名字叫啥就是啥, 方便找对应的仓库 例如 counter.ts
// 2.storeSteup 类似 Vue3 的 setup 作用:函数中定义 数据 和 函数 返回, 它们就是store的数据和函数
// 3.options? 额外的配置
// export const uesCounterStore = defineStore("counter", () => {
//  return {}
// })
export const uesCounterStore = defineStore('counter', () => {
    // 定义
    // state
    const count = ref(0)
    // getters
    const doubleCount = computed(() => count.value * 2)
    // mutations (Pinia 不区分 mutations 和 actions)
    const update = () => count.value++
    // actions
    const asyncUpdate = () => {
        setTimeout(() => {
            count.value += 1000
        }, 1000)
    }
    return {count, doubleCount, update ,asyncUpdate}
})

/src/components/Children.vue

<script setup lang="ts">
// 使用仓库
import { useCounterStore } from "./stores/counter"
// store中有状态和函数
const store = useCounterStore()
</script>
<template>
  <div class="Children-page">Children-page {{store.count}}--{{store.doubleCount}}</div>
</template>

/src/components/Children.vue

<script setup lang="ts">
// 使用仓库
import { useCounterStore } from "./stores/counter"
// store中有状态和函数
const store = useCounterStore()
</script>
<template>
  <div class="Children-page">Children-page {{store.count}}--{{store.doubleCount}}</div>
</template>

注意store获取到后不能解构，否则失去响应式 可以使用storeToRefs来解决 storeToRefs的使用
1.使用 storeToRefs 解决解构仓库状态丢失响应式的问题
问题：当我们想解构 store 提供的数据时候，发现数据是没有响应式的。
vue 组合式API创建的响应式数据的时候，使用 toRefs 保持结构后数据的响应式
/src/App.vue 使用storeToRefs

<script setup lang="ts">
// 使用仓库
import { uesCounterStore } from "./stores/counter.ts";
import Children from "./components/Children.vue";
import { storeToRefs } from "pinia"; // 引入storeToRefs
const store = uesCounterStore()
const { count, doubleCount } = storeToRefs(store) // 使用
</script>
</script>
<template>
    // 可以省略store.count=>count
  <div class="App-page">{{ count }}--{{ doubleCount }}
    <button @click="store.update()">改count</button>
    <button @click="store.asyncUpdate()">异步改</button>
  </div>
  <Children></Children>
</template>

数据持久化

使用 pinia-plugin-persistedstate 实现pinia仓库状态持久化