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>