Vue3和react状态管理之Redux与Pinia的使用比较

初始配置

pinia:

1.通过create-vue脚手架在命令行选择pinia模板生成
2.在项目后续添加使用npm add pinia也可以添加并追加模板

redux:

1.使用create-react-app脚手架带的pinia模板通过npx create-react-app my-app --template redux-typescript生成
2.在项目后续添加使用npm add redux也可以添加但不能追加模板，需要自己配置

开发工具

pinia:集成在vue-devtool中redux: 与react-devtool分离，需要独立下载redux-devtool

初始化总仓库

pinia:创建一个store文件夹>每个仓库扁平化存储(没有入口文件，现拿现取，直接在引入对应仓库)

redux:

1.创建一个store文件夹>index.ts入口文件，引入所有仓库的导出的Reducer，统一管理所有的仓库

import { configureStore, ThunkAction, Action } from '@reduxjs/toolkit';
import counterReducer from '../features/counter/counterSlice';

export const store = configureStore({reducer: {//每次创建一个新仓库必须导出各自reducer并在此导入(可以利用构建工具批量导入)counter: counterReducer,}, middleware: getDefaultMiddleware =>getDefaultMiddleware({serializableCheck: false,}),
});
export type RootState = ReturnType<typeof store.getState>
export type AppDispatch = typeof store.dispatch
export type AppThunk<ReturnType = void> = ThunkAction<ReturnType, RootState, unknown, Action<string>> 

2.所有仓库另外放在festures存储

初始化一个仓库

pinia:

import { defineStore } from "pinia";
export const useCountStore = defineStore({
	id: "countStore",
	state: () => ({
		count:0
	}),
	actions: {
		increment(number) {
		this.count+=number
		}
	},

}); 

redux:

import { createSlice } from '@reduxjs/toolkit'

const demoStore = createSlice({//对标idname: 'demo',//对标初始化stateinitialState: { count: 0 },//对标actionreducers: {//vuex有点类似于redux的写法，state不能解构，action可以解构 increment(state, action) {state.count += action.payload} },
})
//导出actions
export const { increment } = demoStore.actions
//导出reducer给入口文件注册仓库
export default demoStore.reducer 

获得仓库中的值

pinia:直接通过模块化的方式获取仓库

//引入仓库
import { useCountStore } fro