新一代状态管理工具 Pinia学习，快速入门

基本介绍

Pinia 是 Vue.js 的轻量级状态管理库
官方网站：https://pinia.vuejs.org

• pinia和vuex4一样，也是vue官方的状态管理工具(作者是 VueX 核心团队成员）
• pinia相比vuex4，Pinia 对于 vue3 的兼容性更好
• pinia相比vuex4，Pinia 具备完善的 TypeScript 类型推荐
• pinia 同样支持 vue 开发者工具, 最新的开发者工具对vuex4支持不好
• Pinia 的 API 设计非常接近 Vuex 5 的提案。

pinia 核心概念

• state: 状态
• actions: 修改状态（包括同步和异步，pinia 中没有 mutations）
• getters: 计算属性

基本使用与state

（1）安装

yarn add pinia
# 或
npm install pinia

（2）在 main.ts 中挂载 pinia

import { createApp } from 'vue'
import App from './App.vue'

+import { createPinia } from 'pinia'
+const pinia = createPinia()

createApp(App)
+  .use(pinia)
  .mount('#app')

（3）新建文件 store/counter.ts

import { defineStore } from 'pinia'

// 定义 Store, 命名建议： useXxxxStore
// 参数1：Store 的唯一标识
// 参数2：配置对象，可以提供 state actions getters
const useCounterStore = defineStore('counter', {
  // 相当于组件 data
  state() {
    return {
      count: 0,
    }
  },
  // 相当于组件 computed
  getters: {},
  // 相当于组件 methods
  actions: {},
})

// 导出 Store
export default useCounterStore

(4) 在组件中使用

<script setup lang="ts">
import useCounterStore from './store/counter'
// 使用 Store
const counter = useCounterStore()
</script>

<template>
  <h1>轻量状态管理库 Pinia</h1>
  <h2>Store：{{ counter }}</h2>
  <h2>状态 count：{{ counter.count }}</h2>
</template>

actions的使用

在 pinia中 没有mutations，只有 actions，不管是同步还是异步的代码，都可以在actions中完成。

（1）在actions中提供方法并且修改数据

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
+  actions: {
+    add() {
+      this.count++
+    },
+    addAsync() {
+      setTimeout(() => {
+        this.count++
+      }, 1000)
+    },
+  },
})

export default useCounterStore

（2）在组件中使用

<script setup>
import useCounterStore from './store/counter'

const counter = useCounterStore()
</script>

<template>
  <h1>根组件---{{ counter.count }}</h1>
  <button @click="counter.add">加1</button>
  <button @click="counter.addAsync">异步加1</button>
</template>

getters 的使用

pinia 中的 getters 和 vuex 中的基本是一样的，也带有缓存的功能

（1）在getters中提供计算属性

import { defineStore } from 'pinia'
// 1. 创建store
// 参数1：store的唯一表示
// 参数2：对象，可以提供 state actions getters
const useCounterStore = defineStore('counter', {
  state: () => {
    return {
      count: 0,
    }
  },
+  getters: {
+    double(): number {
+      return this.count * 2
+    },
+  },
  actions: {
    add() {
      this.count++
    },
    addAsync() {
      setTimeout(() => {
        this.count++
      }, 1000)
    },
  },
})

export default useCounterStore

(2)在组件中使用

  <h1>根组件---{{ counter.count }}</h1>
  <h3>{{ counter.double }}</h3>

storeToRefs 的使用

目标：掌握storeToRefs的使用

如果直接从pinia中解构数据，会丢失响应式， 使用storeToRefs可以保证解构出来的数据也是响应式的

<script setup lang="ts">
import { storeToRefs } from 'pinia'
import useCounterStore from './store/counter'

const counter = useCounterStore()
// ❌ 如果直接从pinia中解构数据，会丢失响应式
// const { count, double } = counter

// ✅使用 storeToRefs 可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>

<template>
  <h1>轻量状态管理库 Pinia</h1>
  <h2>Store：{{ counter }}</h2>
  <h1>{{ count }}</h1>
  <h3>{{ double }}</h3>
  <hr />
  <button @click="counter.add">加1</button>
  <button @click="counter.addAsync">异步加1</button>
</template>

pinia 模块化

在复杂项目中，不可能吧多个模块的数据都定义到一个store中，一般来说会一个模块对应一个store，最后通过一个根store进行整合

（1）新建 store/user.ts 文件

import { defineStore } from 'pinia'

const useUserStore = defineStore('user', {
  state: () => {
    return {
      name: 'zs',
      age: 18,
    }
  },
})

export default useUserStore

(2)新建 store/index.ts

import useUserStore from './user'
import useCounterStore from './counter'

// 统一导出 useStore 方法
export default function useStore() {
  return {
    user: useUserStore(),
    counter: useCounterStore(),
  }
}

（3）在组件中使用

<script setup lang="ts">
import { storeToRefs } from 'pinia'
-import useCounterStore from './store/counter'
-const counter = useCounterStore()

+import useStore from './store'
+const { counter } = useStore()

// 使用storeToRefs可以保证解构出来的数据也是响应式的
const { count, double } = storeToRefs(counter)
</script>