Baojiaobaohui vue3+ts herramienta de gestión estatal pinia

1. Introducción de Pinia

Definición: pinia es la misma herramienta de gestión de estado que vuex

Gramática: Me gusta  Vue3 , implementa la gestión de estado con dos sintaxis: API opcional y API combinada

Soporte: vue2, mecanografiado, devtools

2. Usar pasos

1. Instalar

pnpm añadir pinia

hilo añadir pinia

npm está cerrado

2. Importar e instanciar en main.ts

// 导入pinia
import { createPinia } from 'pinia'
const pinia = createPinia()

// 挂载pinia
createApp(App).use(pinia).mount('#app')

3. Crea un almacén pinia y úsalo

(1) Método de escritura de API combinado

crear:

import { defineStore } from 'pinia'
// import * as obj from 'pinia'  
// console.log(obj);   
import { ref } from 'vue'
/* 1.组合式pinia */
export const userStoreHr = defineStore('hr', () => {
  // (1)模拟state
  let num = ref(100)
  const arr = ref([1, 2, 3, 4, 5])
  // (2)模拟mutation
  const changeNum = () => {
    num.value += 100
  }
  // (3)模拟action
  const activeArr = () => {
    setTimeout(() => {
      const n = Math.floor(Math.random() * 10) + 1
      arr.value.push(n)
    }, 1000)
  }
  // (4)模拟getters
  const total = () => {
    return arr.value.reduce((sum, item) => item + sum, 0)
  }

  return { num, changeNum, activeArr, total }
})

export default userStoreHr

usar:

<script setup lang="ts">
import { userStoreHr } from './store/hr'
const store = userStoreHr()
// console.log(store);
</script>

<template>
  <div>
    <div>app.vue</div>
    <div>num:{
   
   { store.num }} total:{
   
   { store.total() }}</div>
    <button @click="store.changeNum()">按钮1</button>
    <button @click="store.activeArr()">按钮2</button>
</div>
</template>

(2) Método de escritura de API opcional

crear:

// 创建pinia仓库
import { defineStore } from "pinia";

export const useStoreTt = defineStore('tt', {
  state: () => {
    return {
      count: 10,
      price: 50
    }
  },
  actions: {
    addPrice() {
      this.price += 1
      console.log(this, '组合式API可以用this');
    }
  },
  getters: {
    /* 以下两种写法都可以 */

    // total(): number {
    //   return this.count * this.price
    // }  

    total: (state) => {
      return state.count * state.price
    }
  },
})

export default useStoreTt

usar:

<script setup lang="ts">
import { useStoreTt } from './store/tt'
const store = useStoreTt()

</script>

<template>
  <div>
    <div>app.vue</div>
    <div>count :{
   
   { store.count }} price : {
   
   { store.price }}</div>
    <div>total :{
   
   { store.total }}</div>
    <button @click="store.addPrice()">addPrice</button>
</div>
</template>

(3) Uso de storeToRefs

Resuelto: después de deconstruir los datos, el problema de la falla de respuesta (no se puede deconstruir la función)

<script setup lang="ts">
import { useStoreTt } from './store/tt'
// 导入storeToRefs 
import { storeToRefs } from 'pinia';
const store = useStoreTt()
// 解构的时候调用storeToRefs 
const { count, price } = storeToRefs(store)

</script>

<template>
  <div>
    <div>app.vue</div>
    <!-- 模板中直接使用 -->
    <div>count :{
   
   { count }} price : {
   
   { price }}</div>
    <div>total :{
   
   { store.total }}</div>
    <button @click="store.addPrice()">addPrice</button>
</div>
</template>