vuex与redux,我们都一样
2024-08-26 04:52:03
vuex与redux的主要区别：
redux：生成的全局数据流是通过每个组件的props逐层传递到各个子组件的，通过@connect装饰器绑定在this.props上面。
vuex ：生成的全局数据则是通过getter集成到了框架内部，每个全局属性并非逐层传递到子组件，而是通过数据绑定的方式直接连接到各个子组件，数据及方法都是绑定在组件this上面。
react项目使用react-redux相关依赖；(create-react-app）;
cnpm install redux react-redux redux-actions redux-thunk --save
redux-actions 用来创建规范化的action，简化reducer操作 官方api文档 https://www.npmjs.com/package/redux-actions
redux-thunk 实现redux异步操作 官方api文档 https://www.npmjs.com/package/redux-thunk
vue项目使用vuex相关依赖； （vue-cli）
cnpm install vuex --save
下面就redux 与 vuex 单个模块的state代码贴出
redux：
import { createAction, handleActions } from 'redux-actions'
import { getUserInfo } from '../api/getData.js'
export const saveUserInfo = createAction('SAVEUSERINFO')
export const addNum = createAction('ADDNUM')
export const test = handleActions({
[saveUserInfo]: (state, action) => {
return {
...state,
userInfo: action.payload,
}
},
[addNum]: (state, action) => ({
...state,
num: state.num + 1,
})
}, {
num: 1,
userInfo:{
user:"zq",
_id:""
}
});
export function getUserInfoAction() {
return dispatch => {
getUserInfo().then(res => {
if (res.data.code === 0) {
dispatch(saveUserInfo(res.data.data))
}
})
}
}
vuex
import { getUserInfo } from '@/api/getData'
export const moduleA = {
// namespaced: true,
state: {
userInfo: { user: "zq", _id: "" },
num: 10
},
mutations: {
saveUserInfo(state, action) {
state.userInfo = action
},
addNum(state, action) {
state.num++
}
},
getters: {
num(state) {
return state.num += 100
}
},
actions: {
async getUserInfoAction({ commit }) {
try {
let res = await getUserInfo()
if (res.data.code === 0) {
commit('saveUserInfo', res.data.data)
}
} catch (err) {
console.log(err)
}
}
}
}
redux完整demo 地址：https://github.com/zhuzeliang/react-node-demo
vuex完整demo 地址：https://github.com/zhuzeliang/vue-node-demo
最新文章
- 用VSCode写python的正确姿势(转载)
- 上标、下标~不常用的 html 标签
- ThinkPHP讲解（七）——修改删除
- 新建我的 第一个maven项目
- RAC实例 表空间 维护
- 【SSH三大框架】Hibernate基础第二篇：编写HibernateUtil工具类优化性能
- sencha touch 2.3 结合cordova 环境搭建
- uvalive 6888 Ricochet Robots bfs
- 【Linux搭建创建FTP服务器】---完美解决 - 费元星
- content+animation实现loading效果
- SQL Server 2008还原数据库时出现“备份集中的数据库备份与现有的数据库不同”的解决方法
- 使用flask+SQL语句实现通过前台收到的信息向数据库中插入事件+初级CSS+HTML拯救一下我的主页·····
- [knowledge] 停止等待协议
- vue父子组件（1.0）
- Java代码质量度量工具大阅兵
- testng报告发邮件后css样式缺失问题
- 制作SD卡启动自己编译的uboot.bin
- JS基础，课堂作业，三个数字排序
- 【数据结构系列】线段树(Segment Tree)
- PreviewMouseLeftButtonDown 与 MouseLeftButtonDown