山东三强建设咨询有限公司网站,阿里云申请域名,潍坊做外贸网站,软件开发平台简介Pinia状态管理 在 Vue3 中项目中组件之间传递数据时#xff0c;可以使用 Props 和 Emit#xff0c;还可以使用 Provide/Inject 来代替 Props 和 Emit。Props 和 Emit 只能在具有父子关系的组件之间传递数据#xff0c;所以层级越深#xff0c;过程就越复杂。为了解决此类问…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 1Pinia 第六章 Pinia,Vuex与axios,VueUse 2(Vuex) 第六章 Pinia,Vuex与axios,VueUse 3VueUse 第六章 Pinia,Vuex与axios,VueUse 4axios 创建项目后进入项目文件夹执行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
templateh1Pinia 入门/h1pCount:{{ counter.count }}/p
/template用浏览器查看可以看到 Store 中保存的计数的值为。现在你学会了如何访问 Store 中定义的数据了。 在多个组件中同时使用共享数据 使用 Pinia 的目的是为了能够从所有组件都能访问 Store 中定义的数据那我们来创建一些vue组件来检查它是否能访问到Store中的数据。在components文件夹下新建一个userPinia.vue文件代码如下内容。
script setup
import { useStoreCounter } from ../stores/store;
const counter useStoreCounter();
/script
templateh2User中使用 Pinia/h2p共享数据:{{ 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
templateh1Pinia 入门/h1pCount:{{ counter.count }}/puserPinia /
/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
templateh1Pinia 入门/h1pCount:{{ counter.count }}/pdivh3名称{{counter.user.name}} /h3button clickcounter.sumNumber增加 1/button/divuserPinia /
/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
templateh1Pinia 入门/h1pCount:{{count}}/pdivh3名称{{user.name}} /h3button clicksumNumber增加 1/button/divuserPinia /
/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 counteruseStoreCounter()
const {count} storeToRefs(counter);//获得反应信息
const {sumNumber,user}counter;
/script
templateh1Pinia 入门/h1pCount:{{count}}/pdivh3名称{{user.name}} /h3button clicksumNumber增加 1/button/divuserPinia /
/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 counteruseStoreCounter()
const {count,doubleNumber} storeToRefs(counter);//获得反应信息
const {sumNumber,user}counter;
/script
templateh1Pinia 入门/h1pCount:{{count}}/pp乘2值:{{doubleNumber}}/pdivh3名称{{user.name}} /h3button clicksumNumber增加 1/button/divuserPinia /
/templategetters中定义的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);//stateconst increment () {//actionscount.value;};const doubleCount computed(() count.value * 2);//gettersreturn { 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
templateh2User中使用 Pinia/h2p共享数据:{{ counter.count }}/pbutton clickcounter.$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
templateh2User中使用 Pinia/h2p共享数据:{{ counter.count }}/pbutton clickpatch重设/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
templateh2User中使用 Pinia/h2p共享数据:{{ counter.count }}/pbutton clickpatch更新/button
/template浏览器中点击按钮$state的值发生改变。 5 Pinia 实现出库功能 讲解到目前Pinia的基本用法已经讲解完毕。我想很多人对Pinia的印象就是一个大的全局变量用于保存一些数据而已。但是在开发中Pinia能为我们解决不少复杂的业务逻辑下面我们用Pinia来完成一个库房出库的这样有一定逻辑难度的业务。在完成这些逻辑代码的过程中读者会更好的体会开发人员对State、Actions、Getters 使用技巧。
5.1 库房产品列表 正常情况下我们会通过后端服务器来获得库房产品列表的json对象但是现在我们还没有后端服务器自己创建一个js文件来模仿后端服务传来的json对象内容。
1 创建产品js2 创建库存的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) {//开发中是连接后端服务后获得产品listcb(_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
templateulli v-forproduct in products v-bind:keyproduct.id{{ product.title }} - ¥{{ product.price.toLocaleString() }}- 数量{{ product.inventory }}/li/ul
/templateuserDbList组件中初始化执行Store的getProcuts函数从shopList.js中获取产品列表保存到Store中的products从Store中保存的products中获取展示产品信息。
3 App组件中加入userDbList组件 在 App 组件中导入的 userDbList组件并添加到模板标签中。
script setup
import userDbList from ./components/userDbList.vue;
/script
templateh2库房物品列表/h2userDbList /
/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
templateh2出库物品列表/h2p v-show!items.lengthi还没有选择要出库的物品/i/pulli v-foritem in items :keyitem.id{{ item.title }} - ¥{{ item.price.toLocaleString()}} x/li/ul
/template3 库存组件中增加出库功能 在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
templateulli v-forproduct in products v-bind:keyproduct.id{{product.title }} - ¥{{ product.price.toLocaleString()}} - 数量{{ product.inventory}}button clickaddCart(product)出库/button/li/ul
/template4 App组件中加入dbCart组件
在App 组件中导入的 dbCart组件并添加到模板标签中。
script setup
import userDbList from ./components/userDbList.vue;
import dbCart from ./components/dbCart.vue;
/script
templatediv idapph2库房物品列表/h2userDbList /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对应的产品记录在产品记录减-1const 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库存值。这样可以在页面中解决库存值变为负值问题。
templateulli v-forproduct in products v-bind:keyproduct.id{{ product.title }} - ¥{{ product.price.toLocaleString() }}- 数量{{ product.inventory }}button clickaddCart(product) :disabled!product.inventory出库/button/li/ul
/template完成设置后在浏览器中点出库产品信息后面的数量就会减一当数据库存数量为0的时候出库按钮被禁用。 2 出库信息合并 在cart.js 文件中的addCart 函数进行修改。addCart 函数被执行后会获得产品信息quantity对象使用这个quantity对象为条件在useStoreCar中items列表中寻找是否有这个产品信息quantity保存在items中如果没有就在items中加入这个产品信息并在这个产品信息中新增一个属性quantity等于1quantity表示产品出库数量是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
templateh2出库物品列表/h2p v-show!items.lengthi还没有选择要出库的物品/i/pulli v-foritem in items :keyitem.id{{ item.title }} - ¥{{ item.price.toLocaleString()}} x{{ item.quantity }}/li/ulh3合计总金额:¥{{ total.toLocaleString() }}/h3
/template在浏览器中会看到出库产品的总金额被计算出来。 到这里面大家对 Pinia 的应该有了更深刻的理解。在你的Vue 项目中使用到数据状态管理的时候可以尝试一下 Pinia。
