Vue3最佳实践 第六章 Pinia,Vuex与axios,VueUse 1（Pinia）_pinia vuex axios

Pinia状态管理

  在 Vue3 中项目中组件之间传递数据时，可以使用 Props 和 Emit，还可以使用 Provide/Inject 来代替 Props 和 Emit。Props 和 Emit 只能在具有父子关系的组件之间传递数据，所以层级越深，过程就越复杂。为了解决此类问题需要一种在所有组件之间共享数据的机制（State Management）。在原来的Vue世界中Vuex 以全局状态管理库着称，但是现在出现了一个新的存储库 Pinia，现在所有Vue3创建的新项目都建议使用 Pinia。很多Vue项目中仍然在使用 Vuex 的做为状态库，那么久样它继续使用吧，Vuex 与 Pinia功能基本是一样的。本文将讲解Pinia的基本功能，加深你对Pinia的理解，以及如何在vue中使用Pinia。
  Pinia 是 Vue 的状态管理库，可用于在多个组件之间共享数据。在应用程序中准备一个名为Store的地方，将组件之间需要共享的数据保存在里面。它还具有更新数据和保存数据的功能。

第一章 Vue3项目创建 1 Vue CLI 创建vue项目
第一章 Vue3项目创建 2 使用 Webpack 5 搭建 vue项目
第一章 Vue3项目创建 3 Vite 创建 vue项目
第二章 Vue3 基础语法指令
第三章 Vue Router路由器的使用
第四章 VUE常用 UI 库 1 ( element-plus,Ant ,naiveui,ArcoDesign)
第四章 VUE常用 UI 库 2 ( ailwind 后台框架)
第五章 Vue 组件应用 1( Props )
第五章 Vue 组件应用 2 ( Emit )
第五章 Vue 组件应用 3( Slots )
第五章 Vue 组件应用 4 ( provide 和 inject )
第五章 Vue 组件应用 5 (Vue 插件)
第六章 Pinia,Vuex与axios,VueUse 1（Pinia）
第六章 Pinia,Vuex与axios,VueUse 2(Vuex)
第六章 Pinia,Vuex与axios,VueUse 3（VueUse）
第六章 Pinia,Vuex与axios,VueUse 4（axios）
第七章 TypeScript 上
第七章 TypeScript 中
第七章 TypeScript 下 创建Trello 任务管理器
第八章 ESLint 与 测试 ( ESLint )
第八章 ESLint 与 测试 ( Jest )

创建项目后，进入项目文件夹，执行npm install命令安装pinia

 npm install pinia
1

安装完pinia后，可以通过查看package.json来查看安装的pinia版本。

  "dependencies": {
    "pinia": "^2.0.28",
    "vue": "^3.2.45"
  },
1
2
3
4

需要初始设置才能将 pinia 与 Vue 一起使用。在 src 文件夹中的 main.js 文件将 Pinia 添加为插件。

import { createApp } from 'vue'
import './style.css'
import App from './App.vue'
import { createPinia } from 'pinia'
const app = createApp(App)
app.use(createPinia())//pinia 装入到vue项目中
app.mount('#app')
1
2
3
4
5
6
7

1 state值设置

  完成初始设置后，创建stores文件夹在这个文件夹下面创建一个用于数据共享的store.js文件。这些数据共享文件可以创建多个，并且针对每个不同的业务和功能都要设置一个数据共享文件。在stores文件夹下会保存多个Store类型的文件，这些文件名称最好根据所要执行的业务来命名，这样方便查找和维护。

  首先，在store.js文件中导入pinia创建它的引用对象defineStore。你可以通过defineStore对象创建一个store数据共享器，这些数据共享器使用id来标识，代码通过id标识来找到要使用的数据共享器。我们现在创建一个有计数器功能的数据共享器，它的id名称是counter，返回引用的名称是useStoreCounter ，将这个引用设置成导出函数。

import { defineStore } from 'pinia';
export const useStoreCounter = defineStore('counter', {
  state: () => ({
    count: 1,
  }),
});
1
2
3
4
5
6

  现在定义好了一个计数Store，让我们在App.vue文件中看看是否可以访问和使用它了。导入store数据共享器获得到它的引用useStoreCounter对象，使用useStoreCounter创建一个Store对象counter，在模板中使用这个counter.count获得共享器中的保存的数字内容。

<script setup>
import { useStoreCounter } from './stores/store';
const counter = useStoreCounter();
</script>
<template>
  <h1>Pinia 入门</h1>
  <p>Count:{{ counter.count }}</p>
</template>
1
2
3
4
5
6
7
8

  用浏览器查看可以看到 Store 中保存的计数的值为。现在你学会了如何访问 Store 中定义的数据了。

在多个组件中同时使用共享数据
  使用 Pinia 的目的是为了能够从所有组件都能访问 Store 中定义的数据，那我们来创建一些vue组件来检查它是否能访问到Store中的数据。在components文件夹下新建一个userPinia.vue文件，代码如下内容。

<script setup>
import { useStoreCounter } from '../stores/store';
const counter = useStoreCounter();
</script>
<template>
  <h2>User中使用 Pinia</h2>
  <p>共享数据:{{ counter.count }}</p>
</template>
1
2
3
4
5
6
7
8

在 App.vue 文件中导入userPinia.vue组件，并在模板中使用这个组件。

<script setup>
import { useStoreCounter } from './stores/store';
import userPinia from './components/userPinia.vue';
const counter = useStoreCounter();
</script>
<template>
  <h1>Pinia 入门</h1>
  <p>Count:{{ counter.count }}</p>
  <userPinia />
</template>
1
2
3
4
5
6
7
8
9
10

  浏览器将显示 userPinia 组件中的Store 的计数值。事实证明在多个组件中也可以访问Store 中存储的数据。

2actions动作设置

  上面已经介绍在组件中如何使用和访问Store中的state值，那么我们怎么修改Store的state值中的数据呢？在Pinia的defineStore函数中提供了action属性，在这个action属性中可以添加内置方法，使用这些内置方法来修改defineStore中的state值数据。我们要在 store.js 文件里的defineStore 函数中添加一个增量累加函数sumNumber。

import { defineStore } from 'pinia';
export const useStoreCounter = defineStore('counter', {
  state: () => ({
    count: 1,
    user: {
        name: 'zht',
        dept: '部门一'
      },
  }),
  //内置执行方法属性
  actions: {
    //累加方法
    sumNumber() {
      this.count++;
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  在App.vue文件中添加一个带有点击事件的按钮，设置点击事件执行Store对象Actions中定义的sumNumber函数。

<script setup>
import { useStoreCounter } from './stores/store';
import userPinia from './components/userPinia.vue';
const counter = useStoreCounter();
</script>
<template>
  <h1>Pinia 入门</h1>
  <p>Count:{{ counter.count }}</p>
  <div>
    <h3>名称：{{counter.user.name}}  </h3>
    <button @click="counter.sumNumber">增加 +1</button>
  </div>
  <userPinia />
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  在浏览器中点击按钮，count中的数值会增加。这时候大家会发现父组件和子组件中的count值都会同时发生变化。这些数据共享器中的数据是具有反应特性的，更新反映在所有组件中。

  我们来修改一下App.vue代码使用解构赋值方式来获得 Store 中的变量和函数引用。在template 标签不在使用 counter. 的方式来操作Store中变量与函数，这样使得代码变得更加简洁。

<script setup>
import { useStoreCounter } from './stores/store';
import userPinia from './components/userPinia.vue';
const {count,sumNumber,user } = useStoreCounter();
</script>
<template>
  <h1>Pinia 入门</h1>
  <p>Count:{{count}}</p>
  <div>
    <h3>名称：{{user.name}}  </h3>
    <button @click="sumNumber">增加 +1</button>
  </div>
  <userPinia />
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

  在浏览器中点击按钮，你会看到子组件中的count的数值会增加，但是父组件App.vue中count没有任何变化。App 组件的count值没有更新，因为由于解构赋值获得count值会失去了反应性。为能样执行解构赋值也保留响应式属性，就必要使用到 storeToRefs 函数来让属性值重新获得反应性。

<script setup>
import { useStoreCounter } from './stores/store';
import userPinia from './components/userPinia.vue';
import { storeToRefs } from 'pinia';
const counter=useStoreCounter()
const {count} = storeToRefs(counter);//获得反应信息
const {sumNumber,user}=counter;
</script>
<template>
  <h1>Pinia 入门</h1>
  <p>Count:{{count}}</p>
  <div>
    <h3>名称：{{user.name}}  </h3>
    <button @click="sumNumber">增加 +1</button>
  </div>
  <userPinia />
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

这会在浏览器中我们会看到App.vue中count又重新有了变化。

3getters设置

  defineStore函数中Getters属性，是用于为Store 中的state值数据设置Computed函数。

  现在store文件中defineStore函数中的getter属性中设置一个doubleNumber方法，这个方法将接收state值作为参数，实现将state中的state值中couton属性值剩2，并将结果返回的功能。

export const useStoreCounter = defineStore('counter', {
  state: () => ({
    count: 1,
    user: {
        name: 'zht',
        dept: '部门一'
      },
  }),
  getters: {
    doubleNumber: (state) => state.count * 2,
  },
  actions: {
    sumNumber() {
      this.count++;
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  App.vue代码中使用解构赋值时，getters 函数doubleNumber也必须使用 storeToRefs来成为反应变量。

<script setup>
import { useStoreCounter } from './stores/store';
import userPinia from './components/userPinia.vue';
import { storeToRefs } from 'pinia';
const counter=useStoreCounter()
const {count,doubleNumber} = storeToRefs(counter);//获得反应信息
const {sumNumber,user}=counter;
</script>
<template>
  <h1>Pinia 入门</h1>
  <p>Count:{{count}}</p>
  <p>乘2值:{{doubleNumber}}</p>
  <div>
    <h3>名称：{{user.name}}  </h3>
    <button @click="sumNumber">增加 +1</button>
  </div>
  <userPinia />
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  getters中定义的sumNumber方法和Computed属性使用功能一样。count的值更新的时候也会更新执行sumNumber方法。

在defineStore函数中使用下面的代码来替代替state、actions、getters的属性功能，通过代码可以更清晰的了解这三个属性的作用。

import { defineStore } from 'pinia';
import { ref, computed } from 'vue';
export const useStoreCounter = defineStore('counter', () => {
  const count = ref(1);//state
  const increment = () => {//actions
    count.value++;
  };
  const doubleCount = computed(() => count.value * 2);//getters
  return { count, increment, doubleCount };
});
1
2
3
4
5
6
7
8
9
10

4 $ reset与$patch和值替换

  除了在 Store 中的 action 设置的方法来修改state值，还可以使用 Store 的 $reset 和 $patch 方法来更新state中的值。

1 使用 $reset 方法

  使用 $reset 方法将state中的值重置为初始值。在userPinia.vue组件代码中添加一个按钮，并查看运行情况。

<script setup>
import { useStoreCounter } from '../stores/store';
const counter = useStoreCounter();
</script>
<template>
  <h2>User中使用 Pinia</h2>
  <p>共享数据:{{ counter.count }}</p>
  <button @click="counter.$reset">重设</button>
</template>
1
2
3
4
5
6
7
8
9

单击按钮增加计数中的数值。

点击重置count 的值返回到 defineStore 设置的初始值。

2 使用 $patch 方法

  执行 $reset 方法会将state数据重置为初始值，使用 $patch 方法可以更改state数据值。无需使用actions中的动作方法。

  在userPinia.vue组件代码添加patch函数，通过$patch方法更新state中的count和user值。

<script setup>
import { useStoreCounter } from '../stores/store';
const counter = useStoreCounter();
const patch = () => {
  counter.$patch({
    count: 100,
    user: {
      name: 'zhtbs',
    },
  });
};
</script>
<template>
  <h2>User中使用 Pinia</h2>
  <p>共享数据:{{ counter.count }}</p>
  <button @click="patch">重设</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

  当你点击更新按钮时，state中的count和user值会更新，在浏览器上可以看到count和user改变后的值。

state值是通过 $patch 方法中的函数以传值的方式来重新赋值的。

const patch = () => {
  counter.$patch({
    count: 100,
    user: {
      name: 'zhtbs',
    },
  });
};
1
2
3
4
5
6
7
8

3 state值替换

  值替换的概念与$reset和$patch不同它不是一个方法，而是直接在Store对象的state中重新设置参数值，用新的数据值去替换原来的数据值。userPinia.vue代码中在patch函数中更新$state的值。

<script setup>
import { useStoreCounter } from '../stores/store';
const counter = useStoreCounter();
const patch = () => {
  counter.$state = {
    count: 500,
    user: {
      name: '新的名称',
    },
  };
};
</script>
<template>
  <h2>User中使用 Pinia</h2>
  <p>共享数据:{{ counter.count }}</p>
  <button @click="patch">更新</button>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17

浏览器中点击按钮，$state的值发生改变。

5 Pinia 实现出库功能

  讲解到目前，Pinia的基本用法已经讲解完毕。我想很多人对Pinia的印象就是一个大的全局变量用于保存一些数据而已。但是在开发中Pinia能为我们解决不少复杂的业务逻辑，下面我们用Pinia来完成一个库房出库的这样有一定逻辑难度的业务。在完成这些逻辑代码的过程中读者会更好的体会开发人员对State、Actions、Getters 使用技巧。

5.1 库房产品列表

  正常情况下我们会通过后端服务器来获得库房产品列表的json对象，但是现在我们还没有后端服务器，自己创建一个js文件来模仿后端服务传来的json对象内容。

• 1 创建产品js
• 2 创建库存的sore类
• 3 创建产品列表组件将sore中的数据显示出来
• 4 App组件中引入产品列表组件

1 创建产品js

  在src目录中新建pojo文件夹，在pojo文件中创建一个shopList.js文件，在shopList.js中创建如下代码。

const _products = [
    { id: 1, title: '电机II型号', price: 23800, inventory: 2 },
    { id: 2, title: '轴承34*334', price: 94800, inventory: 5 },
    { id: 3, title: '机箱子23', price: 239800, inventory: 3 },
    { id: 4, title: '变速箱', price: 2800, inventory: 7 },
    { id: 5, title: '破碎机', price: 734800, inventory: 2 },
  ];
  export default {
    //好的产品列表
    getProducts(cb) {
        //开发中是连接后端服务后获得产品list
        cb(_products);//对象中装入产品列表
      //setTimeout(() => cb(_products), 100);
    },
  };
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

2 创建库存Store

  在sores文件夹中新建一个products.js文件，在文件中创建一个defineStore函数用于保存产品信息。在函数的state中定义一个数组的products，在actions中添加getProcucts函数，执行getProducts函数就可以获取到product列表。

import { defineStore } from 'pinia';
import shop from '../pojo/shopList';
export const useStoreProducts = defineStore('products', {
  state: () => ({
    products: [],
  }),
  actions: {
    getProducts() {
      //产品信息保存到state下的products数组中
      shop.getProducts((products) => (this.products = products));
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13

  上面代码 shop.getProducts使用了回调函数有很多人可能不熟悉它。

3 创建产品展示组件

  在components文件夹中创建userDbList.vue组件用于显示库存中产品列表信息。

<script setup>
import { onMounted, ref } from 'vue';
//获得useStoreProducts数据共享器
import { useStoreProducts } from '../stores/products';
// Pinia 中设置反应函数
import { storeToRefs } from 'pinia';
//获得产品列表区全局数据
const { products } = storeToRefs(useStoreProducts());
//获得shopList中的产品列表信息
const { getProducts } = useStoreProducts();
onMounted(() => {
  getProducts();
});
</script>
<template>
  <ul>
    <li v-for="product in products" v-bind:key="product.id">
      {{ product.title }} - ¥{{ product.price.toLocaleString() }}- 数量{{ product.inventory }}
    </li>
  </ul>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

  userDbList组件中初始化执行Store的getProcuts函数从shopList.js中获取产品列表，保存到Store中的products，从Store中保存的products中获取展示产品信息。

3 App组件中加入userDbList组件

  在 App 组件中导入的 userDbList组件，并添加到模板标签中。

<script setup>
import userDbList from './components/userDbList.vue';
</script>
<template>
    <h2>库房物品列表</h2>
    <userDbList />
</template>
<style>
</style>
1
2
3
4
5
6
7
8
9

在浏览器中可以看到库存信息了。

5.2 出库信息列表

  我们将创建一个记录出库信息的store类和一个出库信息组件，在库存组件中加入出库功能。库存组件中点击出库按钮对应的产品信息添加到出库信息的store中，在出库信息组件中将展示这条记录信息。

• 1 创建出库信息sore类
• 2 创建出库信息列表组件
• 3 库存组件中增加出库功能
• 4 App组件中出库组件

1 创建出库信息sore类

  在stores文件夹中创建 cart.js 文件来管理出库产品信息。在 cart.js 文件中定义一个defineStore对象cart，在cart中设置一个数组 items用来保存出库产品信息。我们在设置一个addCart 函数用于执行将收到的参数保存到items 中来。在vue组件中我们通过使用addCart 函数来完成出库列表信息的添加功能。

import { defineStore } from 'pinia';
export const useStoreCart = defineStore('cart', {
  state: () => ({
    items: [],
  }),
  actions: {
    addCart(product) {
      this.items.push(product);
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11

2 创建出库信息列表组件

  在components文件夹中创建dbCart.vue文件。导入useStoreCart 共享数据器，并使用 v-for 指令将数据展现出来。 通过length 属性来判断useStoreCart 中的数据项是否为空，如果为空在组件中显示“还没有选择要出库的物品”。

<script setup>
import { storeToRefs } from 'pinia';
import { useStoreCart } from '../stores/cart';
const { items } = storeToRefs(useStoreCart());
</script>
<template>
  <h2>出库物品列表</h2>
  <p v-show="!items.length"><i>还没有选择要出库的物品</i></p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.title }} - ¥{{ item.price.toLocaleString()}} x
    </li>
  </ul>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

3 库存组件中增加出库功能

  在userDbList.vue文件中加入出库功能。在userDbList.vue代码中引入出库共享数据器的useStoreCart对象，使用解构赋值的方法将useStoreCart对象的addCart 方法赋值给组件中定义的addCart属性。 在模板中的产品列表中加入一个出库按钮，出库按钮的事件与addCart进行绑定，addCart中的参数是产品列表中的一个json对象。

<script setup>
import { onMounted, ref } from 'vue';
import { storeToRefs } from 'pinia';
//获得 库存列表useStoreProducts ，出库列表useStoreCart
import { useStoreProducts } from '../stores/products';
import { useStoreCart } from '../stores/cart';
// useStoreProducts 设置成为反应函数
const { products } = storeToRefs(useStoreProducts());
// 通过getProducts方法获得出库列表数据
const { getProducts } = useStoreProducts();
// 获得出库列表添加方法和出库按钮绑定
const { addCart } = useStoreCart();
onMounted(() => {
  //初始化数据
  getProducts();
});
</script>
<template>
  <ul>
    <li v-for="product in products" v-bind:key="product.id">
      {{product.title }} - 
       ¥{{ product.price.toLocaleString()}} - 
       数量{{ product.inventory}}
      <button @click="addCart(product)">出库</button>
    </li>
  </ul>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27

4 App组件中加入dbCart组件

在App 组件中导入的 dbCart组件，并添加到模板标签中。

<script setup>
import userDbList from './components/userDbList.vue';
import dbCart from './components/dbCart.vue';
</script>
<template>
   <div id="app">
    <h2>库房物品列表</h2>
    <userDbList />
    <hr />
    <dbCart />
   </div>
</template>
<style>
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14

在浏览中点击出库按钮，产品信息将出现在下边的出库物品列表中。

5.3 出库功能完善

  运行上面的代码大家会发现几个问题，第一 点击出库按钮后库存列表产品的数量没有减少，第二 出库列表中的数据相同产品没有合并在一起而是一条一条显示出来。我们还可以完善一些小功能，让用户知道出库产品的总金额是多少等。这些功能我们将通过对库存sore和出库sore中方法的修改来完成上面的功能。

• 1 库存减少实现
• 2 出库信息合并
• 3 出库产品总金额

1 库存减少实现

  我们在库存products.js中添加一个减少库存功能的函数。创建一个函数 decrementInventory在函数中实现库存数量减少功能，在这个函数参数中收到产品ID,并通过这个ID在产品列表中找到这个ID对应的产品信息，将这个产品库存inventory数量减1。

import { defineStore } from 'pinia';
import shop from '../pojo/shopList';
export const useStoreProducts = defineStore('products', {
  state: () => ({
    products: [],
  }),
  actions: {
    getProducts() {
      shop.getProducts((products) => (this.products = products));
    },
    //库存减少函数
    decrementInventory(productId) {
      //使用find函数找到id对应的产品记录，在产品记录减-1
      const product = this.products.find((product) => product.id === productId);
      product.inventory--;
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

  我们将在cart.js 文件中的addCart 函数中引入库存products.js类中的decrementInventory方法，当addCart 函数执行就会同时触发products.js类中的decrementInventory方法，将产品的库存减一。
  这里需要注意一定在cart.js 文件中导入useStoreProduct，才可以使用它的decrementInventory 函数。

import { defineStore } from 'pinia';
import { useStoreProducts } from '../stores/products';
export const useStoreCart = defineStore('cart', {
  state: () => ({
    items: [],
  }),
  actions: {
    addCart(product) {
      //导入库存数据共享器中库存减少函数
      const { decrementInventory } = useStoreProducts();
      this.items.push(product);
      //执行出库产品库存减少一
      decrementInventory(product.id);
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

  在userDbList.vue文件中修改出库按钮。在出库按钮中使用disabled属性和v-bind绑定到product.inventory库存值。这样可以在页面中解决库存值变为负值问题。

<template>
  <ul>
    <li v-for="product in products" v-bind:key="product.id">
      {{ product.title }} - 
      ¥{{ product.price.toLocaleString() }}- 
      数量{{ product.inventory }}
      <button @click="addCart(product)" 
      :disabled="!product.inventory">出库</button>
    </li>
  </ul>
</template>
1
2
3
4
5
6
7
8
9
10
11

  完成设置后在浏览器中点出库，产品信息后面的数量就会减一，当数据库存数量为0的时候出库按钮被禁用。

2 出库信息合并

  在cart.js 文件中的addCart 函数进行修改。addCart 函数被执行后会获得产品信息quantity对象，使用这个quantity对象为条件在useStoreCar中items列表中寻找是否有这个产品信息quantity保存在items中，如果没有就在items中加入这个产品信息，并在这个产品信息中新增一个属性quantity等于1，quantity表示产品出库数量是1。如果在items列表有这个产品信息，我们将这个产品信息中的quantity属性加1，表示产品库存增加一个。

import { defineStore } from 'pinia';
import { useStoreProducts } from '../stores/products';
export const useStoreCart = defineStore('cart', {
  state: () => ({
    items: [],
  }),
  actions: {
    addCart(product) {
      const { decrementInventory } = useStoreProducts();
      //寻找产品信息是否存在
      const item = this.items.find((item) => item.id === product.id);
      if (item) {
        // 如果存在数量加一
        item.quantity++;
      } else {
        //不存在加入items中
        product['quantity']=1;
        this.items.push(product); 
        // 也可以使用扩展运算符 this.items.push({ ...product, quantity: 1 });
      }
      decrementInventory(product.id);
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

完成设置后在浏览器中点出库，相同的出库产品信息将合并在一起。

3 出库总价金额汇总

  到目前为止为了完成前面的功能我们使用到了Store 中state、actions功能，但是还没有出现getters功能的使用。最后就让我们来使用getters功能做出库产品金额汇总的功能吧。
  在getters中创建一个total函数，使用这个total函数来完成汇总金额的功能，在total函数将state中的items出库产品列表中的信息一条一条的取出，对取出数据中的金额部分进行累加计算。在取出state中的items列表信息的时候使用reduce归约函数来完成这个取出动作。cart.js中的代码做如下修改内容。

import { defineStore } from 'pinia';
import { useStoreProducts } from '../stores/products';
export const useStoreCart = defineStore('cart', {
  state: () => ({
    items: [],
  }),
  //合计总金额计算
  getters: {
    total: (state) => {
      return state.items.reduce((total, product) => {
        return total + product.price * product.quantity;
      }, 0);
    },
  },
  actions: {
    addCart(product) {
      const { decrementInventory } = useStoreProducts();
      const item = this.items.find((item) => item.id === product.id);
      if (item) {
        item.quantity++;
      } else {
        product['quantity']=1;
        this.items.push(product); 
      }
      decrementInventory(product.id);
    },
  },
});
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

在dbCart.vue组件中使用 getters total来显示总金额。使用解构赋值分别获得useStoreCart()中的items和total。

<script setup>
import { storeToRefs } from 'pinia';
import { useStoreCart } from '../stores/cart';
const { items, total } = storeToRefs(useStoreCart());
</script>
<template>
  <h2>出库物品列表</h2>
  <p v-show="!items.length"><i>还没有选择要出库的物品</i></p>
  <ul>
    <li v-for="item in items" :key="item.id">
      {{ item.title }} - ¥{{ item.price.toLocaleString()}} x
      {{ item.quantity }}
    </li>
  </ul>
  <h3>合计总金额:¥{{ total.toLocaleString() }}</h3>
</template>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

在浏览器中会看到出库产品的总金额被计算出来。

  到这里面大家对 Pinia 的应该有了更深刻的理解。在你的Vue 项目中使用到数据状态管理的时候，可以尝试一下 Pinia。