vue2(Vuex)、vue3(Pinia)、react(Redux)状态管理

vue2状态管理Vuex

Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它使用集中式存储管理应用的所有组件的状态，以及规则保证状态只能按照规定的方式进行修改。

  • State（状态）:Vuex 使用单一状态树，即一个对象包含全部的应用层级状态。这个状态树对应着一个应用中的所有状态。
  • Getters（获取器）:Getters 允许你在模板中计算状态。相当于组件中的计算属性。可以对 state 中的数据进行处理和过滤。
  • Mutations（变更）:Mutations 是 Vuex 修改状态的唯一方式，它们是同步事务。每个 mutation 都有一个字符串类型的事件类型 (type) 和 一个回调函数，该回调函数接受 state 作为其第一个参数。
  • Actions（动作）:Actions 类似于 Mutations，不同之处在于它们是异步的。Actions 提交 Mutations 来修改状态。Actions 可以包含任意异步操作。
  • modules（模块）：Vuex 允许将 store 分割成模块，每个模块都有自己的 state、mutations、actions、getters。

辅助函数：便于在组件中使用 Vuex 的功能

  • mapState: 将 store 中的 state 映射为组件的计算属性。
  • mapGetters: 将 store 中的 getters 映射为组件的计算属性。
  • mapMutations: 将 store 中的 mutations 映射为组件的方法。
  • mapActions: 将 store 中的 actions 映射为组件的方法。

1、创建vue2项目

安装脚手架：npm install -g @vue/cli
创建vue2项目：vue create vue2_myapp
（输入完命令后选择vue2）

2、安装Vuex依赖
在项目中使用npm或者yarn安装Vuex。

npm install vuex
或yarn add vuex
或npm install vuex@^3.5.0 --save（指定版本使用）

3、在src目录下创建store目录，在下面创建js用于存储Vuex（命名通常为index.js或者store.js）

// store.js
import Vue from 'vue';
import Vuex from 'vuex';
import modulesA from './modules/modulesA'Vue.use(Vuex);export default new Vuex.Store({state: {//存储公共数据count: 100,},  mutations: {// 定义修改state数据的方法increment(state) {state.count++;},decrement(state) {state.count--;},},actions: {// 使用异步的方式来触发mutations中的方法进行提交},getters: {// 获取状态的方法getCount: (state) => state.count,},modules: {// 注册拆分的模块a:{//namespaced: true,//可以直接在modulesA配置在中...modulesA}}
});

当项目比较复杂时，可以在src/store下增加module，将数据拆成模块，下面举一个moduleA示例

// moduleA.js
import Vue from 'vue';
import Vuex from 'vuex';Vue.use(Vuex);//注意此处是导出一个模块不是new一个新vuex
export default{namespaced: true,state: {//存储公共数据countA: 200,},  mutations: {// 定义修改state数据的方法incrementA(state) {state.countA++;},decrementA(state) {state.countA--;},},actions: {// 使用异步的方式来触发mutations中的方法进行提交incrementAsyncA({ commit }) {// 模拟一个异步操作，例如从 API 获取数据setTimeout(() => {commit('incrementA');}, 1000);},},getters: {// 获取状态的方法getCountA: (state) => state.countA,},
};

4、在main.js中引入store

import Vue from 'vue'
import App from './App.vue'
import store from './store/store';//引入store Vue.config.productionTip = falsenew Vue({render: h => h(App),store,//注册store
}).$mount('#app')

5、在组件中使用

<template><div><h2>Root Module</h2><p>Count from Root Module: <!-- 显示方式一：通过计算属性获取getter -->{{ rootCount }} || <!-- 显示方式二：直接获取state中的值 -->{{ $store.state.count }} || <!-- 显示方式三：通过...mapState(['count'])直接使用count -->{{ count }}</p><button @click="incrementRoot">增加模块 A 计数</button><button @click="decrementRoot">减少模块 A 计数</button><h2>Module A</h2><p>Count from Module A: <!-- 显示方式一：通过计算属性获取getter，需要配置namespaced -->{{ moduleACount }} || <!-- 显示方式二：通过在store中注册的模块直接使用modulesA的值 -->{{ $store.state.a.countA }}</p><button @click="incrementModuleA">增加模块 A 计数</button><button @click="decrementModuleA">减少模块 A 计数</button><button @click="incrementModuleAAsync">异步增加模块 A 计数</button></div>
</template><script>
import { mapState,mapMutations,mapActions } from 'vuex';export default {computed: {// 1、使用mapState方式获取数据// mapState使用方式一...mapState(['count']),// mapState使用方式二...mapState({rootCountMapState: 'count', // 将根模块的 'getCount' 映射为 'rootCount'moduleACount: 'a/getCountA', // 将模块 'a' 的 'getCountA' 映射为 'moduleACount'}),// 2、使用 mapGetters 辅助函数将模块中的 getters 映射到组件的计算属性    rootCount() {return this.$store.getters.getCount;},moduleACount() {return this.$store.getters['a/getCountA'];},},methods: {// 1、使用mapMutations获取mutations模块方式一...mapMutations({incrementRoot: 'increment', // 将根模块的 'increment' 映射为 'incrementRoot'decrementRoot: 'decrement', // 将根模块的 'decrement' 映射为 'decrementRoot'incrementModuleA: 'a/incrementA', // 将模块 'a' 的 'incrementA' 映射为 'incrementModuleA'decrementModuleA: 'a/decrementA', // 将模块 'a' 的 'decrementA' 映射为 'decrementModuleA'}),...mapActions({incrementModuleAAsync: 'a/incrementAsyncA', // 将 'a/incrementAsyncA' 映射为 'incrementModuleAAsync'}),// 使用 mapMutations 辅助函数将模块中的 mutations 映射到组件的方法二incrementRoot() {this.$store.commit('increment');},decrementRoot() {this.$store.commit('decrement');},incrementModuleA() {this.$store.commit('a/incrementA');},decrementModuleA() {this.$store.commit('a/decrementA');},},
};
</script>

示例效果图：
在这里插入图片描述

vue3状态管理Pinia

  • State（状态）： 在 Store 中定义的数据，即应用程序的状态。状态可以是基本类型、对象、数组等。
  • Actions（操作）： 在 Store 中定义的用于操作状态的函数。Actions 可以是同步或异步的，通过 this，你可以直接修改状态。如果 actions 返回一个 Promise，Pinia 将等待 Promise 完成，然后再继续执行其他代码。
  • Getter（获取器）：获取器允许你从状态中派生出一些衍生数据，类似于计算属性。通过 getters，你可以在不直接修改状态的情况下获取和处理状态的数据。

1、创建项目（参见上面vue2，输入命令后选择vue3即可）
2、安装pinia

npm install pinia
或yarn add pinia

3、在main.js中引入

import { createApp } from 'vue'
import App from './App.vue'
import { createPinia } from 'pinia';const app = createApp(App);app.use(createPinia());
app.mount('#app')

4、在src下创建store/index.js

import { defineStore } from 'pinia';export const useExampleStore = defineStore('example', {state: () => ({counter: 100,}),actions: {increment() {   this.counter++;console.log(this.counter);},decrement() {this.counter--;},},
});

5、在组件中通过setup()使用,下面列举了五种改变state数据的方式。

<!-- src/components/ExampleComponent.vue -->
<template><div><p>Counter: {{ exampleStore.counter }}</p><button @click="increment">Increment</button><button @click="decrement">Decrement</button></div>
</template><script setup>
import { useExampleStore } from '../store/index';// 组合式
const exampleStore = useExampleStore();const increment=()=>{// 方式一：在store的action中操作exampleStore.increment();// 方式二：直接在应用的组件中改变// exampleStore.counter++;// 方式三：使用$patch整体覆盖// exampleStore.$patch({//   counter:105// })// 方式四：使用$patch改变// exampleStore.$patch((state)=>{//   if(state.counter){//     state.counter++;//   }// })// 方式五：使用$state覆盖// exampleStore.$state ={//   counter:122// }
}
const decrement=()=>{// exampleStore.decrement();exampleStore.counter--;
}// 选项式
// export default {
//   setup() {
//     const exampleStore = useExampleStore();
//     return {
//       exampleStore,
//       increment: exampleStore.increment,
//       decrement: exampleStore.decrement,
//     };
//   }
// };
</script>

示例效果图：
在这里插入图片描述
Pinia与VueX区别：

  • Vuex 为vue2打造的，Pinia为vue3打造的
  • Pinia没有mutations，直接通过actions进行同步和异步操作，异步需要返回一个promise
  • Pinia 没有modules，设计更为分散，每个组件可以拥有自己的 Store。
  • Vuex 组件通过 mapState、mapMutations、mapActions 等辅助函数来访问存储库中的数据和操作。pinia通过setup 函数来引入和使用 Store，并通过 Store 的实例访问状态和操作。
  • Vuex 对 TypeScript 有良好的支持，但类型推断可能有时候会感觉有点繁琐。Pinia 是使用 TypeScript 编写的，提供了更好的 TypeScript 支持，可以更轻松地推断和利用类型信息。
  • vuex做数据持久化使用插件vuex-persistedstate，Pinia做数据持久化使用pinia-plugin-persist

react状态管理Redux

  • Provider：把父组件传递进来的store对象放入react 上下文中，这样connect组件就可以从上下文中获取到store对象
  • combineReducer：store.state进行分片管理，每个reducer管理state中的一部分。由于createStore只接受一个reducer，所以采用该方法生成一个最终的reducer
  • 中间件（Middleware）:中间件是一个位于动作派发和 Reducer 之间的拦截层。它允许你在动作被派发到 Reducer 之前执行额外的逻辑。
  • State：整个 Redux 应用程序的状态，它是只读的。状态的更新是通过触发动作来创建新的状态，而不是直接修改原有状态。
  • action：更新state的状态时用。
  • dispatch：触发store修改state的命令，是createStore返回对象的一个方法
  • connect：从react上下文中取出store对象，订阅store.state的变化，当store state变化时调用自身的方法重新生成connect组件的state,被包装组件便会被重新渲染。不会感知到store的存在，dispatch在这里也是非必须的。
    connect的4个内置组件： 状态mapStateToProps、动作mapDispatchToProps、属性合并mergeProps 和 配置项options
  • 异步中间件：redux没有直接提供执行异步操作的方法，需要手动集成中间件，最常用异步实现的中间件有redux-thunk、redux-saga

1、搭建react+ts项目

npm install -g create-react-app
npx create-react-app my-react-ts-app --template typescript

2、安装redux

npm install redux react-redux

3、在src下创建如下结构
src/
– – store/
– – – – index.ts
– – – – reducers/
– – – – – – index.ts
– – – – – – counterReducer.ts

// src/store/index.ts
import { configureStore } from '@reduxjs/toolkit';
import rootReducer from './reducers';const store = configureStore({reducer: rootReducer
});export default store;
// src/store/reducers/index.ts
// combineReducers 用于将多个 reducer 组合成一个根 reducer
import { combineReducers } from 'redux';
import counterReducer from './counterReducer';const rootReducer = combineReducers({counter: counterReducer,// 添加其他 reducer...
});export default rootReducer;
// src/store/reducers/counterReducer.ts// 从Redux中导入Action类型，用于定义动作对象
import { Action } from 'redux';// 定义动作类型的常量，以避免拼写错误
const INCREMENT = 'INCREMENT';
const DECREMENT = 'DECREMENT';// Action Creators: 返回动作对象的函数
export const increment = (): Action => ({ type: INCREMENT });
export const decrement = (): Action => ({ type: DECREMENT });// Reducer函数：根据派发的动作更新状态
const counterReducer = (state = 0, action: Action): number => {switch (action.type) {case INCREMENT:// 当派发INCREMENT动作时，将当前状态加1return state + 1;case DECREMENT:// 当派发DECREMENT动作时，将当前状态减1return state - 1;case 'INCREMENTFIXED':return state + 5;default:// 如果动作类型不被识别，则返回当前状态return state;}
};// 将counterReducer作为模块的默认导出
export default counterReducer;

4、在index.tsx中引入

import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
//引入redux
import { Provider } from 'react-redux';
import store from './store';const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement
);
root.render(<React.StrictMode><Provider store={store}><App /></Provider></React.StrictMode>);reportWebVitals();

5、在components中创建Counter.tsx

// src/components/Counter.tsx
import React from 'react';
import { connect } from 'react-redux';
import { increment, decrement } from '../store/reducers/counterReducer';interface CounterProps {count: number;increment: () => void;decrement: () => void;
}const Counter: React.FC<CounterProps> = ({ count, increment, decrement }) => {return (<div><p>Count: {count}</p><button onClick={increment}>Increment</button><button onClick={decrement}>Decrement</button></div>);
};// 中间件mapStateToProps 函数将 Redux store 的状态映射到组件的属性。
const mapStateToProps = (state: { counter: number }) => ({count: state.counter,
});// 中间件mapDispatchToProps 对象将动作创建函数映射到组件的属性。
const mapDispatchToProps = {increment,decrement
};// connect 函数将组件连接到 Redux store，并将 mapStateToProps 和 mapDispatchToProps 的结果传递给组件
export default connect(mapStateToProps, mapDispatchToProps)(Counter);

示例效果图：
在这里插入图片描述

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如若转载，请注明出处：http://www.hqwc.cn/news/423331.html

如若内容造成侵权/违法违规/事实不符，请联系编程知识网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

vue封装接口

vue封装接口

目录 封装接口前缀 配置逻辑 接口存放文件 配置代理 获取数据方法 封装接口前缀 config.js const serverConfig {baseURL: "https://xxx.xxxxxxxx.com/api", // 请求基础地址,可根据环境自定义useTokenAuthorization: false, // 是否开启 token 认证};export …
阅读更多...
Prometheus配置Grafana监控大屏（Docker）

Prometheus配置Grafana监控大屏（Docker）

拉取镜像 docker pull grafana/grafana挂载目录 mkdir /data/prometheus/grafana -p chmod 777 /data/prometheus/grafana临时启动 docker run -d -p 3000:3000 --name grafana grafana/grafana从容器拷贝配置文件至对应目录 docker exec -it grafana cat /etc/grafana/gra…
阅读更多...
JUC并发编程-常用的多线程操作辅助类(必会)、读写锁、阻塞队列

JUC并发编程-常用的多线程操作辅助类(必会)、读写锁、阻塞队列

8. 常用的辅助类(必会) 1&#xff09;CountDownLatch CountDownLatch: 减法计数器 CountDownLatch是一个同步辅助类&#xff0c;在多线程环境中用于控制线程的执行顺序。它可以让一个或多个线程等待其他线程完成一组操作后再继续执行。 CountDownLatch通过一个计数器来实现&…
阅读更多...
TQ8WS-Azide，Tide Quencher 8WS-N3，可以在荧光光谱分析中抑制荧光信号的强度

TQ8WS-Azide，Tide Quencher 8WS-N3，可以在荧光光谱分析中抑制荧光信号的强度

您好&#xff0c;欢迎来到新研之家 文章关键词&#xff1a;Tide Quencher 8WS Azide&#xff0c;TQ8WS Azide&#xff0c;Tide Quencher 8WS N3&#xff0c;TQ8WSN3&#xff0c;Tide Quencher 8WS 叠氮&#xff0c;TQ8WS 叠氮 一、基本信息 产品简介&#xff1a;Fluorescenc…
阅读更多...
uniapp中vue2项目导入高德地图

uniapp中vue2项目导入高德地图

1、看官网新手入门链接导入原生高德地图&#xff1a; JS API 结合 Vue 使用-基础-进阶教程-地图 JS API 2.0|高德地图API (amap.com) 具体步骤&#xff1a; 第一步&#xff0c;安装插件 npm i amap/amap-jsapi-loader --save 第二步&#xff0c;在vue组件中写代码显示地图…
阅读更多...
第六课：Prompt

第六课：Prompt

文章目录 第六课&#xff1a;Prompt1、学习总结&#xff1a;Prompt介绍预训练和微调模型回顾挑战 Pre-train, Prompt, PredictPrompting是什么?prompting流程prompt设计 课程ppt及代码地址 2、学习心得&#xff1a;3、经验分享&#xff1a;4、课程反馈&#xff1a;5、使用Mind…
阅读更多...
Go 复合数据类型

Go 复合数据类型

1. 数组&#xff08;array&#xff09;&#xff08;OK&#xff09; 数组数组的概念数组是具有固定长度且拥有零个或多个相同数据类型元素的序列 i. 元素的数据类型相同 ii. 长度固定的序列 iii. 零个或多个元素的序列 与 slice 对比 由于数组的长度固定&#xff0c;所以在 G…
阅读更多...
【YOLO系列】 YOLOv4之SAT自对抗训练

【YOLO系列】 YOLOv4之SAT自对抗训练

一、简介 自对抗训练&#xff08;Self-Adversarial Training&#xff0c;简称SAT&#xff09;是一种新型的数据增强技术&#xff0c;旨在通过神经网络自身进行的对抗式攻击来提高模型的鲁棒性和泛化能力。其主要分为两个阶段&#xff1a; 第一阶段&#xff0c;神经网络会对其原…
阅读更多...
【工具】SageMath｜Ubuntu 22 下 SageMath 极速安装 （2024年）

【工具】SageMath｜Ubuntu 22 下 SageMath 极速安装 （2024年）

就一个终端就能运行的东西&#xff0c; 网上写教程写那么长&#xff0c; 稍微短点的要么是没链接只有截图、要么是链接给的不到位&#xff0c; 就这&#xff0c;不是耽误生命吗。 废话就到这里。 文章目录 链接步骤 链接 参考&#xff1a; Install SageMath in Ubuntu 22.04We…
阅读更多...
搜索与图论第六期 最短路问题

搜索与图论第六期 最短路问题

前言 最短路问题真的很重要很重要希望大家都能够完全掌握所有最短路算法&#xff01;&#xff01; 一、最短路问题的分类 Dijkstra&#xff1a; Dijkstra算法是一种著名的图算法&#xff0c;主要用于求解有权图中的单源最短路径问题。它由荷兰计算机科学家艾兹赫尔戴克斯特…
阅读更多...
编写.NET Dockerfile文件构建镜像

编写.NET Dockerfile文件构建镜像

创建一个WebApi项目&#xff0c;并且创建一个Dockerfile空文件&#xff0c;添加以下代码&#xff0c;7.0代表的你项目使用的SDK的版本&#xff0c;构建的时候也需要选择好指定的镜像tag FROM mcr.microsoft.com/dotnet/aspnet:7.0 AS base WORKDIR /app EXPOSE 80 EXPOSE 443F…
阅读更多...
【浅谈】软件架构中轻量级与重量级的区别

【浅谈】软件架构中轻量级与重量级的区别

&#x1f680; 个人主页 极客小俊 ✍&#x1f3fb; 作者简介&#xff1a;web开发者、设计师、技术分享博主 &#x1f40b; 希望大家多多支持一下, 我们一起学习和进步&#xff01;&#x1f604; &#x1f3c5; 如果文章对你有帮助的话&#xff0c;欢迎评论 &#x1f4ac;点赞&a…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023