前端【TS】07-typescript【基础】【Pinia】

介绍

 

什么是Pinia

　　Pinia 是 Vue 的专属的最新状态管理库 ，是 Vuex 状态管理工具的替代品

　　

 

手动添加Pinia到Vue项目

　　1. 使用 Vite 创建一个空的TS + Vue3项目

npm create vite@latest vue-pinia-ts -- --template vue-ts

　　2. 按照官方文档安装 pinia 到项目中

 

Pinia基础使用 - 计数器案例

1、定义store

// 创建计数器store

// 1、导入defineStore
import { defineStore } from 'pinia'
import { computed, ref } from 'vue'

// 2、通过defineStore创建store
// 参数1为名称
// 参数2为回调函数，返回一个对象，将state和方法返回
export const useCounterStore = defineStore('counter', () => {
  // 数据state
  const count = ref(0)

  // 修改数据的方法(action)
  const increment = () => {
    count.value++
  }

  // getter
  const doubleCount = computed(() => count.value * 2)

  // 以对象的方式return出去供组件使用
  return {
    count,
    doubleCount,
    increment,
  }
})

2. 组件使用store

<script setup lang="ts">
// 使用counterStore

// 1. 导入一个use打头的方法
import { useCounterStore } from './store/counterStore'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
</script>

<template>
  <button @click="counterStore.increment">{{ counterStore.count }}</button>
  getter:{{ counterStore.doubleCount }}
</template>

getters实现

　　Pinia中的 getters 直接使用 computed函数 进行模拟, 组件中需要使用需要把 getters return出去

　　

action异步实现

　　方式：异步action函数的写法和组件中获取异步数据的写法完全一致

　　

 

需求：在Pinia中获取频道列表数据并把数据渲染App组件的模板中

channelStore.ts

// 1. 定义store结构

import { defineStore } from 'pinia'
import { ref } from 'vue'
import axios from 'axios'

// 2. 实现需求

export const useChannelStore = defineStore('channel', () => {
  // 1. 定义类型
  type ChannelItem = {
    id: number
    name: string
  }
  type ResData = {
    data: {
      channels: ChannelItem[]
    }
    message: string
  }

  // 2. 定义响应式数据 (state)
  const list = ref<ChannelItem[]>([])

  // 3. axios获取数据 (异步action)
  const getList = async () => {
    const res = await axios.request<ResData>({
      url: 'http://geek.itheima.net/v1_0/channels',
    })
    list.value = res.data.data.channels
  }

  // 重要
  return {
    list,
    getList,
  }
})

App.vue  使用store

<script setup lang="ts">
// 1. 导入一个use打头的方法
import { useChannelStore } from './store/channelStore'
import { onMounted } from 'vue'
import { storeToRefs } from 'pinia'
// 2. 执行方法得到store实例对象
const channelStore = useChannelStore()
console.log(channelStore)

// 调用channelStore的异步action
onMounted(() => channelStore.getList())

// 直接解构赋值(响应式丢失)
// const { count, doubleCount } = counterStore

// 使用storeToRefs解构(只能支持数据: state/getters)
const { count, doubleCount } = storeToRefs(counterStore)
</script>
<template>
  <ul>
    <li v-for="item in channelStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

 

storeToRefs工具函数

　　使用storeToRefs函数可以辅助保持数据（state + getter）的响应式解构