vue的状态库管理实现示例
更新时间：2024年04月09日 08:28:11 作者：她说她一如既往的爱我
Vuex 是 Vue.js 官方推荐的状态管理库之一，本文主要介绍了vue的状态库管理实现示例，具有一定的参考价值，感兴趣的可以了解一下
Vuex 和 Pinia 均是 Vue.js 的状态管理库，它们为 Vue 应用程序提供了一种集中式的、可预测的状态管理解决方案。
Vuex 是 Vue.js 官方推荐的状态管理库之一。它的核心概念包括 state、mutation、action 和 getter。其中，state 代表应用程序的状态数据，在 Vuex 中存储为唯一的来源，mutation 用于修改状态数据并确保数据变化的可追踪性，action 用于处理异步操作或组合多个 mutation 操作，getter 可以让我们对 state 进行计算和派生，并使其变得更加易于访问。一个 Vuex store 实例是一个全局 JavaScript 对象，可以在所有组件中通过注入来进行访问和操作。
安装、引入Pinia
安装：npm install pinia 或 yarn add pinia引入注册：
Vue3的引入方法main.
app.vue
<template>
<div>pinia-current：{{ Test.current }}</div>
<div>pinia-name：{{ Test.name }}</div>
</template>
<script setup lang="ts">
import { useTestStore } from "./store";
const Test = useTestStore();
</script>
<style lang="scss" scoped></style>
批量修改工厂函数形式
推荐使用函数形式 可以自定义修改逻辑
<template>
<div>pinia-current：{{ Test.current }}</div>
<div>pinia-name：{{ Test.name }}</div>
<div style="display: flex; flex-direction: column">
<button @click="funChange">工厂函数实现批量change</button>
</template>
<script setup lang="ts">
import { useTestStore } from "./store";
const Test = useTestStore();
const funChange = () => {
Test.$patch((state) => {
(state.current = 999), (state.name = "小3");
});
};
</script>
<style lang="scss" scoped></style>到此这篇关于vue的状态库管理实现示例的文章就介绍到这了,更多相关vue 状态库管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！
您可能感兴趣的文章:
相关文章
vue项目预览excel表格功能(file-viewer插件)
这篇文章主要介绍了vue项目预览excel表格功能(file-viewer插件),本文分步骤结合实例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧2023-10-10
这篇文章主要介绍了vue-property-decorator的使用方式,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教2025-06-06
在项目中经常会复用一些变量和函数,比如用户的登录token,用户信息等,这时将它们设为全局的就显得很重要了,下面这篇文章主要给大家介绍了关于vue如何定义全局变量和全局方法的相关资料,需要的朋友可以参考下2023-04-04
本文介绍了如何在Vue3项目中封装一个时间信息收集组件,采用双向绑定响应式数据,通过对Element-Plus的Slider组件二次封装,实现时间轴功能,解决了小数计算导致匹配问题和v-model绑定组件无效问题,感兴趣的朋友跟随小编一起看看吧2024-09-09
localStorage 和 sessionStorage 属性允许在浏览器中存储 key/value 对的数据,localStorage 用于长久保存整个网站的数据,保存的数据没有过期时间,直到手动去删除,本文给大家介绍Vue3封装localStorage-基本使用,感兴趣的朋友一起看看吧2023-12-12
这篇文章主要为大家详细介绍了springboot+VUE实现登录注册，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-05-05
这篇文章主要为大家详细介绍了vue路由嵌套的SPA实现步骤，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-11-11
解决vue中使用swiper插件问题及swiper在vue中的用法
Swiper是纯javascript打造的滑动特效插件，面向手机、平板电脑等移动终端。这篇文章主要介绍了解决vue中使用swiper插件及swiper在vue中的用法,需要的朋友可以参考下2018-04-04
这篇文章主要介绍了Vue集成Iframe页面的方法示例，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧2017-12-12
今天小编就为大家分享一篇使用elementUI实现将图片上传到本地的示例，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2018-09-09
最新评论