【pinia】Mise en route et utilisation de Pinia :

---

1. Qu'est-ce que le pinia

Pinia est la bibliothèque de gestion d'état exclusive de Vue, qui peut partager l'état entre les composants ou les pages. C'est un substitut aux outils de gestion d'état Vuex. Par rapport à Vuex, il présente les avantages suivants

1. Fournir une API plus simple (mutation supprimée)
2. Fournir une API conforme au style d'API combiné (unifié avec la nouvelle syntaxe de Vue3)
3. Suppression de la notion de modules, chaque magasin est un module indépendant
4. Fonctionne avec TypeScript pour fournir une inférence de type fiable

2. Créez un projet Vue vide et installez Pinia

1. Créez un projet Vue vide

npm init vue@latest

2. Installez Pinia et enregistrez-vous

npm i pinia

import {
    
     createPinia } from 'pinia'

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

3. Réaliser le compteur

Étapes principales :

1. définir le magasin
2. Les composants utilisent le magasin

1- Définir le magasin

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
  }
})

2- Les composants utilisent le magasin

<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>

4. Implémenter les getters

Les getters peuvent être implémentés directement à l'aide de propriétés calculées

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

Cinq, action asynchrone

Idée : La fonction d'action prend en charge à la fois les modes synchrone et asynchrone, ce qui est cohérent avec la méthode d'écriture consistant à envoyer des requêtes réseau dans les composants
.

1. Définir l'action en magasin
2. déclencher une action dans le composant

1- définir l'action en magasin

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 d'appel dans le composant

<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>

6. storeToRefs maintient une déconstruction réactive

En déstructurant et en attribuant directement en fonction du magasin, les données réactives (état et getter) perdront les caractéristiques réactives, utilisez storeToRefs pour aider à maintenir la réactivité

<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>

7. Utilisation de base :

【1】main.js

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

// 导入 pinia 实例
import pinia from './stores'
import persist from 'pinia-plugin-persistedstate'
// 使用持久化存储插件
pinia.use(persist)

export function createApp() {
    
    
  // 创建 vue 实例
  const app = createSSRApp(App)

  // 使用 pinia
  app.use(pinia)

  return {
    
    
    app,
  }
}

【2】store=》index.js

import {
    
     createPinia } from 'pinia'

// 创建 pinia 实例
const pinia = createPinia()


// 默认导出，给 main.ts 使用
export default pinia

【3】membre.ts

import type {
    
     LoginResult } from '@/types/member'
import {
    
     defineStore } from 'pinia'
import {
    
     ref } from 'vue'

// 定义 Store
export const useMemberStore = defineStore(
  'member',
  () => {
    
    
    // 会员信息
    const profile = ref<LoginResult>()

    // 保存会员信息，登录时使用
    const setProfile = (val: LoginResult) => {
    
    
      profile.value = val
    }

    // 清理会员信息，退出时使用
    const clearProfile = () => {
    
    
      profile.value = undefined
    }

    // 记得 return
    return {
    
    
      profile,
      setProfile,
      clearProfile,
    }
  },
  {
    
    
    // 网页端配置
    // persist: true,
    // 小程序端配置
    persist: {
    
    
      storage: {
    
    
        getItem(key) {
    
    
          return uni.getStorageSync(key)
        },
        setItem(key, value) {
    
    
          uni.setStorageSync(key, value)
        },
      },
    },
  },
)