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

news2024/11/25 14:55:34

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）

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

 npm install pinia

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

  "dependencies": {
    "pinia": "^2.0.28",
    "vue": "^3.2.45"
  },

需要初始设置才能将 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 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,
  }),
});

  现在定义好了一个计数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>

  用浏览器查看可以看到 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>

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

  浏览器将显示 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++;
    },
  },
});

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

  在浏览器中点击按钮，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>

在这里插入图片描述

  在浏览器中点击按钮，你会看到子组件中的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>

这会在浏览器中我们会看到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++;
    },
  },
});

  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>

  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 };
});

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>

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

在这里插入图片描述

点击重置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>

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

在这里插入图片描述

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

const patch = () => {
  counter.$patch({
    count: 100,
    user: {
      name: 'zhtbs',
    },
  });
};

3 state值替换

  值替换的概念与 r e s e t 和 reset和 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>

浏览器中点击按钮，$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);
    },
  };

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));
    },
  },
});

  上面代码 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>

  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>

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

在这里插入图片描述

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);
    },
  },
});

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>

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>

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>

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

在这里插入图片描述

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--;
    },
  },
});

  我们将在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);
    },
  },
});

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

  完成设置后在浏览器中点出库，产品信息后面的数量就会减一，当数据库存数量为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);
    },
  },
});

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

在这里插入图片描述

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);
    },
  },
});

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

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

在这里插入图片描述

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

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.coloradmin.cn/o/1048547.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈，一经查实，立即删除！

相关文章

brew 安装MySQL 5.7

brew 安装MySQL 5.7

写在前面&#xff1a;博主是一只经过实战开发历练后投身培训事业的“小山猪”&#xff0c;昵称取自动画片《狮子王》中的“彭彭”&#xff0c;总是以乐观、积极的心态对待周边的事物。本人的技术路线从Java全栈工程师一路奔向大数据开发、数据挖掘领域&#xff0c;如今终有小成…
阅读更多...
【云原生】k8s集群调度

【云原生】k8s集群调度

目录 一、调度约束 1.1List-Watch工作机制 1.2调度过程 二、指定调度节点 2.1修改成 nodeSelector 调度方式 三、亲和性 &#xff08;1&#xff09;节点亲和性 &#xff08;2&#xff09;Pod 亲和性 3.1 键值运算关系 四、污点(Taint) 和 容忍(Tolerations) 4.1污点(…
阅读更多...
搭建 Prometheus 对服务进行监控

搭建 Prometheus 对服务进行监控

前言&#xff1a; 服务平时没啥问题&#xff0c;一到过节我放假&#xff0c;它也想放假&#xff0c;所以只能找个监工看着了。当前市面上主流的监工方案是 zabbix 和 prometheus&#xff0c;没有优劣之分&#xff0c;只是适用场景略有区别。我这边的需求就主要是监控服务的端口…
阅读更多...
温度与振动监测技术在电机故障智能诊断中的应用

温度与振动监测技术在电机故障智能诊断中的应用

在现代工业生产中&#xff0c;电机是许多设备和机械的核心驱动力。然而&#xff0c;电机故障可能会导致生产中断、设备损坏以及生产成本的增加。为了避免这些问题&#xff0c;工业设备状态监测技术应运而生。本文将探讨如何利用先进的设备状态监测技术&#xff0c;尤其是温度和…
阅读更多...
各种业务场景调用API代理的API接口教程

各种业务场景调用API代理的API接口教程

API代理的API接口在各种业务场景中具有广泛的应用&#xff0c;本文将介绍哪些业务场景可以使用API代理的API接口&#xff0c;并提供详细的调用教程和代码演示&#xff0c;同时&#xff0c;我们还将讨论在不同场景下使用API代理的API接口所带来的好处。 哪些业务场景可以使用AP…
阅读更多...
C# 字符串和正则表达式

C# 字符串和正则表达式

C# 字符串和正则表达式 System.String 类StringBuilder 成员格式化字符串正则表达式 System.String 类 StringBuilder 成员 格式化字符串 正则表达式
阅读更多...
央国企信创改造难在何处？先行建设国产身份域管可少走弯路

央国企信创改造难在何处？先行建设国产身份域管可少走弯路

据统计&#xff0c;全球超 91% 的具规模企业将 Microsoft Active Directory &#xff08;微软AD&#xff09;作为数字化身份的基础底座。通常企业达到 300 人以上规模开始建设 AD&#xff0c;而高科技企业早在 50-60 人左右规模时就开始搭建。 AD身份域管是企业身份的事实标准 …
阅读更多...
货物寄到英国选择什么物流比较划算？

货物寄到英国选择什么物流比较划算？

随着全球化的发展&#xff0c;越来越多的企业开始将产品销售到海外市场&#xff0c;其中英国作为一个重要的贸易伙伴&#xff0c;吸引了大量的中国企业的关注。然而&#xff0c;如何将货物安全、快速地运送到英国&#xff0c;成为了众多企业面临的一个问题。那么&#xff0c;货…
阅读更多...
拥抱数字正义时代，看AIGC如何驱动法律变革

拥抱数字正义时代，看AIGC如何驱动法律变革

人工智能&#xff0c;作为科技领域的代表&#xff0c;目前正在逐步渗透并应用于各个领域。大到政府的社会治理&#xff0c;小到提问的识别延伸&#xff0c;AI已悄然走进了生活中的各个领域。单说人民法院的司法工作中&#xff0c;随机分案的程序设计、音字转换的功能实现、裁判…
阅读更多...
04、EL和JSTL核心技术

04、EL和JSTL核心技术

目录 1 EL表达式&#xff08;熟悉&#xff09; 1.1 基本概念 1.2 主要功能 1.3 访问内置对象的数据 1.3.1访问方式 1.3.2 执行流程 1.4 访问请求参数的数据 1.5 访问Bean对象的属性 1.5.1 访问方式 1.5.2 主要区别 1.6 访问集合中的数据 1.7 常用的内置对象 …
阅读更多...
二叉树题目：二叉树剪枝

二叉树题目：二叉树剪枝

文章目录 题目标题和出处难度题目描述要求示例数据范围 解法思路和算法代码复杂度分析 题目 标题和出处 标题&#xff1a;二叉树剪枝 出处&#xff1a;814. 二叉树剪枝 难度 4 级 题目描述 要求 给定二叉树的根结点 root \texttt{root} root&#xff0c;返回移除了所有…
阅读更多...
LEO天线，全球市场总体规模，头部前八大厂商排名及市场份额

LEO天线，全球市场总体规模，头部前八大厂商排名及市场份额

LEO天线全球市场总体规模 据QYResearch调研团队最新报告“全球LEO天线市场报告2023-2029”显示&#xff0c;预计2029年全球LEO天线市场规模将达到3545.3百万美元&#xff0c;未来几年年复合增长率CAGR为29.6%。 主要驱动因素: 近年来&#xff0c;全球航天工业的投资激增&#…
阅读更多...
React antd Table点击下一页后selectedRows丢失之前页选择内容的问题

React antd Table点击下一页后selectedRows丢失之前页选择内容的问题

一、问题 使用了React antd 的<Table>标签&#xff0c;是这样记录选中的行id与行内容的&#xff1a; <TabledataSource{data.list}rowSelection{{selectedRowKeys: selectedIdsInSearchTab,onChange: this.onSelectChange,}} // 表格是否可复选&#xff0c;加 type: …
阅读更多...
NFT Insider#109：The Sandbox推出了首个足球小将 NFT 作品集，YGG Web3 游戏峰会即将开启！

NFT Insider#109：The Sandbox推出了首个足球小将 NFT 作品集，YGG Web3 游戏峰会即将开启！

引言&#xff1a;NFT Insider由NFT收藏组织WHALE Members、BeepCrypto联合出品&#xff0c;浓缩每周NFT新闻&#xff0c;为大家带来关于NFT最全面、最新鲜、最有价值的讯息。每期周报将从NFT市场数据&#xff0c;艺术新闻类&#xff0c;游戏新闻类&#xff0c;虚拟世界类&#…
阅读更多...
情满中秋᛫欢度国庆 | 联诚发与你共度佳节！

情满中秋᛫欢度国庆 | 联诚发与你共度佳节！

转眼九月份又走到尽头 国庆和中秋正好撞了个满怀 随风飘扬的国旗与满街飘香的月饼 国泰民安与阖家团圆 这是大家与小家最美好的祈愿 当中秋遇上国庆&#xff0c;当团圆遇上国诞 双节来临之际 为庆祝传统佳节与祖国生日 也为感谢联诚发每位员工的辛勤付出 9月28日下午 …
阅读更多...
国庆旅游带什么东西？国庆数码必备数码清单请收好

国庆旅游带什么东西？国庆数码必备数码清单请收好

出游度假少不了的是啥&#xff1f;当然是拍美美的照片记录快乐啦&#xff01;So&#xff0c;今天就特意给大家准备了一期数码产品&#xff0c;出游必备&#xff0c;而且还可以作为出片道具。 【umelody 轻律 U1头戴式耳机】——269元 产品外观定位时下流行之‘Retro Futurism’…
阅读更多...
一朵华为云，如何做好百模千态？

一朵华为云，如何做好百模千态？

点击关注 文丨刘雨琦、郝鑫 2005年华为提出网络时代的“All IP”&#xff0c;2011年提出数字化时代的“All Cloud”&#xff0c;2023年提出智能时代的“All Intelligence”。 截至目前&#xff0c;华为的战略升级经历了三个阶段。 步入智能化&#xff0c;需要迎接的困难依然…
阅读更多...
异地寄件云打印教程

异地寄件云打印教程

对于部分企业来说&#xff0c;出于各种原因&#xff0c;员工不得不进行“异地办公”&#xff0c;在这种情况下&#xff0c;因公寄件就是一件麻烦事儿&#xff0c;为什么这么说呢&#xff1f; 比方说一些电商企业&#xff0c;由于成本把控的问题&#xff0c;仓库会建在离货源地更…
阅读更多...
降本提效促成交，抖音电商商品卡实时免佣这么做就对了！

降本提效促成交，抖音电商商品卡实时免佣这么做就对了！

抖音电商深耕全域生意&#xff0c;于今年3月推出商品卡免佣政策助力商家开辟生意新阵地&#xff0c;运行半年多&#xff0c;已有超百万商家收获可观免佣收益。9月1日起&#xff0c;商品卡免佣政策升级为实时免佣&#xff0c;佣金实时返还、金额清楚&#xff0c;再次激发商家经营…
阅读更多...
混淆技术研究-混淆技术-源码分析(2)

混淆技术研究-混淆技术-源码分析(2)

简介 OLLVM（Obfuscator-LLVM）是基于LLVM（Low Level Virtual Machine）框架的一种代码混淆器。它主要用于对C/C++和汇编语言程序进行混淆，以增加代码的复杂性，提高代码的安全性和抵抗逆向工程的能力。 IR（Intermediate Representation）是指中间表示，是编译器在将源代码…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023