初始配置
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