官网：https://pinia.vuejs.org/
牛逼教程：https://www.bilibili.com/video/BV11Y411b7nb

一、环境初始化

1.创建项目

  1. $ yarn create vite

然后跟着提示一步步走，使用ts

2.安装pinia

  1. $ yarn add pinia

二、基本使用

1.创建pinia示例并挂载

  1. import { createApp } from 'vue'
  2. import App from './App.vue'
  3. import { createPinia } from 'pinia'
  4. // 创建pinia实例
  5. const pinia = createPinia()
  6. // 挂载到根实例上
  7. createApp(App).use(pinia).mount('#app')

2.基本使用

  1. import { defineStore } from "pinia"
  3. // 1.定义并导出容器
  4. // 参数1：容器的ID，必须唯一，将来Pinia会把所有的容器挂载到根容器，每个容器的名字就是这里的ID
  5. export const useMainStore = defineStore('main', {
  6.   /**
  7.    * 类似与组件的data， 用来存储全局状态
  8.    * 1.必须是函数：这样是为了在服务端渲染的时候避免交叉请求导致的数据状态污染（客户端其实无所谓）
  9.    * 2.必须是箭头函数：为了更好的ts类型推导
  10.    * 返回值：一个函数，调用该函数即可得到容器实例
  11.    */
  12.   state: () => {
  13.     return {
  14.       count: 100,
  15.       foo: 'bar',
  16.       arr: [1, 2, 3]
  17.     }
  18.   },
  19.   /**
  20.    * 类似于组件的computed，用来封装计算属性，有【缓存】功能
  21.    */
  22.   getters: {
  23.     // 每个函数接受一个可选参数：state状态对象
  24.     // count10(state) {
  25.     //   console.log('count10()调用了');// 具有缓存功能
  26.     //   return state.count + 10
  27.     // }
  29.     // （不建议）如果不使用state而使用this，此时就不能对返回值类型做自动推导了，必须手动指定
  30.     count10(): number {
  31.       return this.count + 10
  32.     }
  33.   },
  34.   /**
  35.    * 完全类比于Vue2组件中的methods（可以直接用this)，用来【封装业务逻辑】，修改state
  36.    */
  37.   actions: {
  38.     /**
  39.      * 注意！！不能使用箭头函数定义actions！！一定要用普通函数！！！
  40.      * why？因为箭头函数绑定了外部this
  41.      */
  42.     changeState(num: number) {
  43.       // 可以直接使用this，像极了Vue2
  44.       // this.count++
  45.       // this.foo = 'hello'
  46.       // this.arr.push(4)
  48.       // 对于批量修改，建议使用patch做优化
  49.       this.$patch((state) => {
  50.         state.count += num
  51.         state.foo = 'hello'
  52.         state.arr.push(4)
  53.       })
  54.     }
  55.   }
  56. })
  57. // 2.容器中的state
  59. // 3.修改state
  61. // 4.actions的使用

打开App.vue，砍掉没用的，我们直接使用项目中HelloWorld.vue组件

  1. <script setup lang="ts">
  2. import HelloWorld from './components/HelloWorld.vue'
  3. </script>
  5. <template>
  6.   <HelloWorld />
  7. </template>
  9. <style>
  10. #app {
  11.   font-family: Avenir, Helvetica, Arial, sans-serif;
  12.   -webkit-font-smoothing: antialiased;
  13.   -moz-osx-font-smoothing: grayscale;
  14.   text-align: center;
  15.   color: #2c3e50;
  16.   margin-top: 60px;
  17. }
  18. </style>

下面是HelloWorld.vue的内容

  1. <template>
  2.   <p>{{ mainStore.count }}</p>
  3.   <p>{{ mainStore.foo }}</p>
  4.   <p>{{ mainStore.arr }}</p>
  5.   <p>{{ mainStore.count10 }}</p>
  6.   <p>{{ mainStore.count10 }}</p>
  7.   <p>{{ mainStore.count10 }}</p>
  8.   <hr />
  9.   <p>{{ count }}</p>
  10.   <p>{{ foo }}</p>
  11.   <p>
  12.     <button @click="handleChangeState">修改数据</button>
  13.   </p>
  14. </template>
  16. <script lang="ts" setup>
  17. import { storeToRefs } from 'pinia'
  18. import { useMainStore } from '../store'
  20. // 【哪里使用写哪里】，此时要在HelloWorld组件中用，那就写这里。这很Composition API
  21. const mainStore = useMainStore() 
  23. // 禁止！这样会丧失响应性，因为pinia在底层将state用reactive做了处理
  24. // const { count, foo } = mainStore
  25. // 解决方案：将结构出的数据做ref响应式代理
  26. const { count, foo } = storeToRefs(mainStore)
  28. const handleChangeState = () => {
  29.   // ==============数据修改的几种方式=============
  30.   // 方式一：直接修改
  31.   // mainStore.count++
  33.   // 方式二：使用 $patch(对象) 批量修改，建议使用，底层做了性能优化
  34.   // mainStore.$patch({
  35.   //   count: mainStore.count + 1,
  36.   //   foo: 'hello',
  37.   //   arr: [...mainStore.arr, 4] // 这就不优雅了，所以有了方式三
  38.   // })
  40.   // 方式三：使用 $patch(回调函数)，这个更优雅，墙裂推荐！！！
  41.   // 回调函数中的state参数，就是Store定义时里面的state!
  42.   // mainStore.$patch((state) => {
  43.   //   state.count++
  44.   //   state.foo = 'hello'
  45.   //   state.arr.push(4)
  46.   // })
  48.   // 方式四：逻辑较为复杂时，应封装到Store的actions中，并对外暴露接口
  49.   mainStore.changeState(10)
  50. }
  51. </script>

从以上几种修改store数据的方式，可以看出pinia的使用非常的简便+灵活，也非常的Composition API。推荐使用后两种方式。

三、购物车案例

1.准备工作

需求说明

  • 商品列表
    • 展示商品列表
    • 添加到购物车
  • 购物车
    • 展示购物车商品列表
    • 展示总价格
    • 订单结算
    • 展示结算状态

      页面模板

      ```vue 

  2. ```vue
  3. <template>
  4.   <ul>
  5.     <li>
  6.       商品名称 - 商品价格
  7.       <button>添加到购物车</button>
  8.     </li>
  9.     <li>
  10.       商品名称 - 商品价格
  11.       <button>添加到购物车</button>
  12.     </li>
  13.     <li>
  14.       商品名称 - 商品价格
  15.       <button>添加到购物车</button>
  16.     </li>
  17.   </ul>
  18. </template>
  20. <script lang="ts" setup>
  22. </script>
  1. <template>
  2.   <div class="cart">
  3.     <h2>我的购物车</h2>
  4.     <p>
  5.       <i>请添加一些商品到购物车</i>
  6.     </p>
  7.     <ul>
  8.       <li>商品名称 - 商品价格 × 商品数量</li>
  9.       <li>商品名称 - 商品价格 × 商品数量</li>
  10.       <li>商品名称 - 商品价格 × 商品数量</li>
  11.     </ul>
  12.     <p>商品总价</p>
  13.     <p>
  14.       <button>结算</button>
  15.     </p>
  16.     <p>结算成功 / 失败.</p>
  17.   </div>
  18. </template>
  20. <script lang="ts" setup>
  22. </script>

数据接口

  1. /**
  2.  * src/api/shop.ts
  3.  * Mocking client-server processing
  4.  */
  7. export interface IProduct {
  8.   id: number
  9.   title: string
  10.   price: number
  11.   inventory: number // 库存
  12. }
  14. const _products: IProduct[] = [
  15.   {id: 1, title: 'iPad 4 Mini', price: 500.01, inventory: 2},
  16.   {id: 2, title: 'H&M T-Shirt White', price: 10.99, inventory: 10},
  17.   {id: 3, title: 'Charli XCX -Sucker CD', price: 19.99, inventory: 5}
  18. ]
  20. export const getProducts = async () => {
  21.   await wait(1000)
  22.   return _products
  23. }
  25. export const buyProducts = async () => {
  26.   await wait(1000)
  27.   return Math.random() > 0.5
  28. }
  30. /**
  31.  * 封装了Promise版本的定时器
  32.  * @param delay 延迟时间
  33.  * @returns Promise
  34.  */
  35. async function wait(delay:number) {
  36.   return new Promise(resolve => setTimeout(resolve, delay))
  37. }

2.开始开发

定义Store

以下代码学习点：

  • as类型断言
  • 如何在actions中写异步操作 ```typescript import { defineStore } from “pinia” import { getProducts, IProduct } from “../api/shop”

export const useProdunctsStore = defineStore(‘products’, { state: () => { return { all: [] as IProduct[] // 所有商品列表（学习类型断言的使用） } },

getters: {},

actions: { //actions既支持异步操作 async loadAllProducts() { const ret = await getProducts() this.all = ret }, // 也支持同步操作 decrementProduct(product: IProduct) { const ret = this.all.find(item => item.id === product.id) if (ret) { ret.inventory— } } } })

  1. 下面的代码，有以下学习点：
  3. - type类型合并与过滤
  4. - 跨容器通信的极致优雅操作
  5. ```typescript
  6. import { defineStore } from "pinia";
  7. import { buyProducts, IProduct } from "../api/shop";
  8. import { useProdunctsStore } from "./products";
  10. /**
  11.  * {id, title, price, quantity}
  12.  */
  13. type CartProduct = { // 合并
  14.   num: number
  15. } & Omit<IProduct, 'inventory'> // Omit是过滤
  17. export const useCartStore = defineStore('cart', {
  18.   state: () => {
  19.     return {
  20.       cartProducts: [] as CartProduct[],
  21.       checkoutStatus: null as null | string
  22.     }
  23.   },
  25.   getters: {
  26.     // 总价
  27.     totalPrice(state) {
  28.       return state.cartProducts.reduce((total, item) => {
  29.         return total + item.price * item.num
  30.       }, 0)
  31.     }
  32.   },
  34.   actions: {
  35.     /**
  36.      * 往购物车添加商品
  37.      * 这是一个相对复杂的逻辑，与容器中的数据强相关，所以肯定要定义在actions里面！
  38.      * @param product 需要添加的商品
  39.      */
  40.     addProductToCart(product: IProduct) {
  41.       // 先看商品有没有库存
  42.       if (product.inventory <= 0) {
  43.         return
  44.       }
  45.       // 检查购物车中是否已有该商品
  47.       const cartItem = this.cartProducts.find(item => item.id === product.id)
  48.       // 如果有则让商品数量+1
  49.       if (cartItem) {
  50.         cartItem.num++
  51.       } else {
  52.         // 如果没有则添加到购物车列表中
  53.         this.cartProducts.push({
  54.           id: product.id,
  55.           title: product.title,
  56.           price: product.price,
  57.           num: 1
  58.         })
  59.       }
  61.       // 跟新商品库存（应该由商品容器暴露API）
  62.       const productsStore = useProdunctsStore()
  63.       productsStore.decrementProduct(product)
  64.       // 跨容器通信！！！！！竟然如此简单！！！
  65.     },
  66.     /**
  67.      * 结算
  68.      */
  69.     async checkOut() {
  70.       const ret = await buyProducts() 
  71.       this.checkoutStatus = ret ? '成功' : '失败'
  72.       if (ret) {
  73.         this.cartProducts = [] // 清空购物车
  74.       }
  75.     }
  76.   }
  77. })

重写组件

  1. <template>
  2.   <ul>
  3.     <li v-for="item in productsStore.all">
  4.       {{ item.title }} - {{ item.price }}
  5.       <br>
  6.       <button :disabled="!item.inventory" @click="cartStore.addProductToCart(item)">添加到购物车</button>
  7.     </li>
  8.   </ul>
  9. </template>
  11. <script lang="ts" setup>
  12. import { useCartStore } from '../store/cart';
  13. import { useProdunctsStore } from '../store/products'
  15. const productsStore = useProdunctsStore()
  16. const cartStore = useCartStore()
  18. productsStore.loadAllProducts() // 加载所有数据
  19. </script>
  1. <template>
  2.   <div class="cart">
  3.     <h2>我的购物车</h2>
  4.     <p>
  5.       <i>请添加一些商品到购物车</i>
  6.     </p>
  7.     <ul>
  8.       <li v-for="item in cartStore.cartProducts">{{ item.title }} - {{ item.price }} × {{ item.num }}</li>
  9.     </ul>
  10.     <p>商品总价： {{ cartStore.totalPrice }}</p>
  11.     <p>
  12.       <button @click="cartStore.checkOut">结算</button>
  13.     </p>
  14.     <p v-show="cartStore.checkoutStatus">结算{{ cartStore.checkoutStatus }}.</p>
  15.   </div>
  16. </template>
  18. <script lang="ts" setup>
  19. import { useCartStore } from '../store/cart'
  20. const cartStore = useCartStore()
  21. </script>