Vue3 完整学习笔记 - 第四部分

4. Pinia 状态管理与组件通信

4.1 Pinia 基础

重点掌握：

• Store 的创建和使用
• State、Getters、Actions 的定义
• 组合式风格的 Store

基础 Store 示例：

// stores/counter.ts
import { defineStore } from 'pinia'

export const useCounterStore = defineStore('counter', {
  // 状态
  state: () => ({
    count: 0,
    name: 'Eduardo',
    items: []
  }),

  // 计算属性
  getters: {
    doubleCount: (state) => state.count * 2,
    // 使用this访问其他getter
    doubleCountPlusOne(): number {
      return this.doubleCount + 1
    }
  },

  // 方法
  actions: {
    increment() {
      this.count++
    },
    async fetchItems() {
      const response = await fetch('/api/items')
      this.items = await response.json()
    }
  }
})

// 组合式写法
export const useCounterStore = defineStore('counter', () => {
  const count = ref(0)
  const name = ref('Eduardo')
  
  const doubleCount = computed(() => count.value * 2)
  
  function increment() {
    count.value++
  }
  
  return { count, name, doubleCount, increment }
})

在组件中使用：

<template>
  <div>
    <p>Count: {{ counter.count }}</p>
    <p>Double: {{ counter.doubleCount }}</p>
    <button @click="counter.increment">+1</button>
    <button @click="increment">+1 (Destructured)</button>
  </div>
</template>

<script setup>
import { useCounterStore } from '@/stores/counter'
import { storeToRefs } from 'pinia'

const counter = useCounterStore()

// 解构时保持响应性
const { count, doubleCount } = storeToRefs(counter)
const { increment } = counter

// 批量修改状态
function updateState() {
  counter.$patch({
    count: counter.count + 1,
    name: 'John'
  })
  
  // 或者使用函数形式
  counter.$patch((state) => {
    state.count++
    state.name = 'John'
  })
}

// 监听状态变化
counter.$subscribe((mutation, state) => {
  console.log(mutation.type, mutation.payload)
})
</script>

4.2 Pinia 进阶使用

重点掌握：

• 插件开发
• 持久化存储
• 状态重置

示例代码：

// stores/plugins/persistence.ts
import { PiniaPluginContext } from 'pinia'

export function persistencePlugin({ store }: PiniaPluginContext) {
  // 从localStorage恢复状态
  const savedState = localStorage.getItem(`${store.$id}-state`)
  if (savedState) {
    store.$state = JSON.parse(savedState)
  }
  
  // 监听状态变化并保存
  store.$subscribe(({ storeId, state }) => {
    localStorage.setItem(`${storeId}-state`, JSON.stringify(state))
  })
}

// main.ts
const pinia = createPinia()
pinia.use(persistencePlugin)

// 自定义 Store 属性
pinia.use(({ store }) => {
  store.customProperty = 'my custom value'
  store.customMethod = () => console.log('hello')
})

4.3 组件通信方式一：Props 与 Emit

重点掌握：

• Props 定义与验证
• 事件发射与监听
• v-model 的使用

示例代码：

<!-- ChildComponent.vue -->
<template>
  <div>
    <input
      :value="modelValue"
      @input="$emit('update:modelValue', $event.target.value)"
    />
    <button @click="handleClick">Click Me</button>
  </div>
</template>

<script setup lang="ts">
const props = defineProps<{
  modelValue: string
  label?: string
}>()

const emit = defineEmits<{
  (e: 'update:modelValue', value: string): void
  (e: 'customEvent',  { id: number, value: string }): void
}>()

const handleClick = () => {
  emit('customEvent', { id: 1, value: 'test' })
}
</script>

<!-- ParentComponent.vue -->
<template>
  <div>
    <ChildComponent
      v-model="inputValue"
      label="Username"
      @customEvent="handleCustomEvent"
    />
  </div>
</template>

<script setup>
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'

const inputValue = ref('')

const handleCustomEvent = (data) => {
  console.log('Custom event received:', data)
}
</script>

4.4 组件通信方式二：Provide/Inject

重点掌握：

• 跨层级组件通信
• 响应式数据传递
• 作用域插槽替代方案

示例代码：

<!-- ParentComponent.vue -->
<template>
  <div>
    <slot :data="data" :updateData="updateData"></slot>
    <ChildComponent />
  </div>
</template>

<script setup>
import { provide, ref } from 'vue'

const data = ref({ count: 0 })

// 提供响应式数据
provide('data', data)

// 提供方法
const updateData = () => {
  data.value.count++
}
provide('updateData', updateData)

// 提供只读数据
provide('readonlyData', readonly(data))
</script>

<!-- ChildComponent.vue -->
<template>
  <div>
    <p>Count: {{ data.count }}</p>
    <button @click="updateData">Update</button>
  </div>
</template>

<script setup>
import { inject } from 'vue'

// 注入数据和方法
const data = inject('data')
const updateData = inject('updateData')

// 使用默认值
const theme = inject('theme', 'light')
</script>

4.5 组件通信方式三：Event Bus (mitt)

重点掌握：

• 事件总线的使用
• 事件监听与清理
• 适用场景

示例代码：

// eventBus.ts
import mitt from 'mitt'

export const emitter = mitt()

// 类型定义
type Events = {
  'item-click': { id: number; data: any }
  'data-updated': void
}

export const typedEmitter = mitt<Events>()

// ComponentA.vue
<script setup>
import { onMounted, onUnmounted } from 'vue'
import { emitter } from './eventBus'

// 监听事件
onMounted(() => {
  emitter.on('item-click', (event) => {
    console.log('Item clicked:', event)
  })
})

// 清理事件监听
onUnmounted(() => {
  emitter.off('item-click')
})

// 发送事件
const handleClick = () => {
  emitter.emit('item-click', { id: 1,  'test' })
}
</script>

// ComponentB.vue
<script setup>
import { emitter } from './eventBus'

// 发送事件
const notifyUpdate = () => {
  emitter.emit('data-updated')
}
</script>

4.6 异步组件与动态组件

重点掌握：

• 异步组件的加载
• 动态组件切换
• 加载状态处理

示例代码：

<template>
  <div>
    <!-- 异步组件 -->
    <Suspense>
      <template #default>
        <AsyncComponent />
      </template>
      <template #fallback>
        <div>Loading...</div>
      </template>
    </Suspense>

    <!-- 动态组件 -->
    <component 
      :is="currentComponent"
      @change="handleChange"
    />
    
    <button @click="toggleComponent">Switch Component</button>
  </div>
</template>

<script setup>
import { ref, defineAsyncComponent } from 'vue'

// 异步组件定义
const AsyncComponent = defineAsyncComponent({
  loader: () => import('./HeavyComponent.vue'),
  loadingComponent: LoadingComponent,
  errorComponent: ErrorComponent,
  delay: 200,
  timeout: 3000
})

// 动态组件
const components = {
  'comp-a': defineAsyncComponent(() => import('./ComponentA.vue')),
  'comp-b': defineAsyncComponent(() => import('./ComponentB.vue'))
}

const currentComponent = ref('comp-a')

const toggleComponent = () => {
  currentComponent.value = currentComponent.value === 'comp-a' ? 'comp-b' : 'comp-a'
}
</script>