脚本之家 服务器常用软件
快捷导航
您的位置：首页 → 网络编程 → JavaScript → javascript类库 → vue.js → vue 状态库管理

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 状态库管理内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！ 

您可能感兴趣的文章:

相关文章

最新评论