Vue3 小兔鲜：Pinia入门

Date: May 11, 2023
Sum: Pinia概念、实现counter、getters、异步action、storeToRefs保持响应式解构

什么是Pinia

Pinia 是 Vue 的专属状态管理库，可以实现跨组件或页面共享状态，是 vuex 状态管理工具的替代品，和 Vuex相比，具备以下优势

提供更加简单的API （去掉了 mutation ）
提供符合组合式API风格的API （和 Vue3 新语法统一）
去掉了modules的概念，每一个store都是一个独立的模块
搭配 TypeScript 一起使用提供可靠的类型推断

中文文档：https://pinia.vuejs.org/zh

创建空Vue项目并安装Pinia

1. 创建空Vue项目

npm init vue@latest

2. 安装Pinia并注册

npm i pinia

import { createPinia } from 'pinia'

const app = createApp(App)
// 以插件的形式注册
app.use(createPinia())
app.use(router)app.mount('#app')

实现counter

核心步骤：

定义store
组件使用store

1- 定义store

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

export const useCounterStore = defineStore('counter', ()=>{
  // 数据 （state）
  const count = ref(0)

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

  // 以对象形式返回
  return {
    count,
    increment
  }
})

理解：

在定义store的时候，我们采取和组合式api一样的写法，不过需要return回需要的数据与方法。

2- 组件使用store

<script setup>
  // 1. 导入use方法
    import { useCounterStore } from '@/stores/counter'
  // 2. 执行方法得到store实例对象  store里有数据和方法
  const counterStore = useCounterStore()
</script>

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

案例：

counter.js

// 导入一个方法 defineStore
import { defineStore } from 'pinia'
import { ref } from 'vue'

export const useCounterStore =  defineStore('counter' , () => {
   // 定义数据（state）
   const count = ref(0)

   // 定义修改数据的方法（action 同步+异步）
   const increment = () => {
    count.value++
   }

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

App.vue

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

<script setup>
// 1. 导入 use 打头的方法
import { useCounterStore } from '@/stores/counter'
// 2. 执行方法得到store实例对象
const counterStore = useCounterStore()
console.log(counterStore);
</script>

<style>

</style>

效果：实现一个计数器

实现getters

getters直接使用计算属性即可实现

实现：这里的doubleCount永远会随着count的变化而变化

// 数据（state）
const count = ref(0)
// getter (computed)
const doubleCount = computed(() => count.value * 2)

异步action

思想：action函数既支持同步也支持异步，和在组件中发送网络请求写法保持一致

步骤： 1. store中定义action 2. 组件中触发action

1- store中定义action

const API_URL = 'http://geek.itheima.net/v1_0/channels'

export const useCounterStore = defineStore('counter', ()=>{
  // 数据
  const list = ref([])
  // 异步action
  const loadList = async ()=>{
    const res = await axios.get(API_URL)
    list.value = res.data.data.channels
  }
  
  return {
    list,
    loadList
  }
})

2- 组件中调用action

<script setup>
	import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 调用异步action
  counterStore.loadList()
</script>

<template>
	<ul>
    <li v-for="item in counterStore.list" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

storeToRefs保持响应式解构

直接基于store进行解构赋值，响应式数据（state和getter）会丢失响应式特性，使用storeToRefs辅助保持响应式

具体操作：

<script setup>
  import { storeToRefs } from 'pinia'
    import { useCounterStore } from '@/stores/counter'
  const counterStore = useCounterStore()
  // 使用它storeToRefs包裹之后解构保持响应式
  const { count } = storeToRefs(counterStore)

  const { increment } = counterStore

</script>

<template>
    <button @click="increment">
    {{ count }}
  </button>
</template>

理解：数据和方法如何解构赋值

数据解构赋值：

采用解构赋值，并采用方法包裹

方法解构赋值：

直接解构赋值即可

App.vue

<template>
  <button @click="increment">{{ count }}</button>
  <p>{{ doubleCount }}</p>
  <ul>
    <li v-for="item in counterStore.getList" :key="item.id">{{ item.name }}</li>
  </ul>
</template>

<script setup>
	// 1. 导入 use 打头的方法
	import { useCounterStore } from '@/stores/counter'
	import { onMounted } from 'vue'
	import { storeToRefs } from 'pinia'
	// 2. 执行方法得到store实例对象
	const counterStore = useCounterStore()
	
	// 数据解构：
	// 直接解构赋值(会造成响应式丢失)
	  // 这里采用方法包裹（可以保持响应式的更新）
	const { count, doubleCount } = storeToRefs(counterStore)
	
	// 方法解构：
	  // 注： 方法解构直接从counterStore中解构赋值即可
	const { increment } = counterStore
	
	onMounted(() => {
	  counterStore.getList()
	})
</script>

效果：

Untitled