包教包会vue3+ts状态管理工具pinia

一、Pinia介绍

定义：pinia是和vuex一样的状态管理工具

语法：和 Vue3 一样，它实现状态管理有两种语法：选项式API 和组合式API

支持：vue2、typeScript、devtools

二、使用步骤

1.安装

pnpm add pinia

yarn add pinia

npm i pinia

2.在main.ts中导入，实例化

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

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

3.创建pinia仓库并使用

（1）组合式API写法

创建：

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

使用：

<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）选项式API写法

创建：

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

使用:

<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）storeToRefs的使用

解决：解构数据后，响应式失效的问题（不能解构函数）

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

包教包会vue3+ts状态管理工具pinia

猜你喜欢