Baojiaobaohui vue3+ts state management tool pinia

1. Introduction of Pinia

Definition: pinia is the same state management tool as vuex

Grammar: Like  Vue3 it, it implements state management with two syntaxes: optional API and combined API

Support: vue2, typeScript, devtools

2. Use steps

1. Install

pnpm add pinia

yarn add pinia

npm is closed

2. Import and instantiate in main.ts

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

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

3. Create a pinia warehouse and use it

(1) Combined API writing method

create:

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

use:

<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) Optional API writing method

create:

// 创建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

use:

<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) Use of storeToRefs

Solution: After deconstructing the data, the responsiveness fails (the function cannot be deconstructed)

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