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实现点击显示不同图片的效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2019-08-08
这篇文章主要给大家介绍了关于vue3使用quill富文本编辑器保姆级教程的相关资料,在许多网站和应用程序中富文本编辑器是一种常见的工具,它使用户能够以直观的方式创建和编辑文本内容,需要的朋友可以参考下2023-11-11
基于vue3+antDesign2+echarts 实现雷达图效果
这篇文章主要介绍了基于vue3+antDesign2+echarts 实现雷达图,本文通过实例代码图文相结合给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2022-08-08
这篇文章主要介绍了基于vue-simplemde实现图片拖拽、粘贴功能,需要的朋友可以参考下2018-04-04
最近小编接到一个项目，需要在浏览器的ide中支持自定义提示功能，接下来通过本文给大家介绍在vue中实现Monaco Editor自定义提示功能,需要的朋友可以参考下2019-07-07
Vue3 + Vite 使用 SVG 的方法主要是为了引入和利用图标库、自定义组件以及通过插件简化项目构建过程,这篇文章给大家介绍了Vue3+vite实现使用svg可改变颜色的全过程,需要的朋友可以参考下2024-07-07
toRaw和markRaw是Vue 3中引入的新API,用于更精细地控制对象的代理和响应性,它们提供了在需要时绕过代理或禁用响应性的能力,有助于提高性能和更好地与第三方库进行集成,本文给大家介绍Vue 3中toRaw和markRaw的使用,感兴趣的朋友一起看看吧2023-10-10
在开发中经常有从列表跳到详情页，然后返回详情页的时候需要缓存列表页的状态（比如滚动位置信息），这个时候就需要保存状态，要缓存状态2021-10-10
这篇文章主要为大家详细介绍了VUE实现时间轴播放组件，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2021-10-10
这篇文章主要介绍了vue项目使用websocket连接问题及解决，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教2022-10-10
最新评论