vuex与redux,我们都一样
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
vuex与redux,我们都一样的更多相关文章
- vuex 与 redux 的 区别
一:redux和flux的区别 1)redux是flux中的一个实现 2))在redux中我们只能定义一个store,在flux中我们可以定义多个 3)在redux中,store和dispatch都放 ...
- 37行代码构建无状态组件通信工具-让恼人的Vuex和Redux滚蛋吧!
状态管理的现状 很多前端开发者认为,Vuex和Redux是用来解决组件间状态通信问题的,所以大部分人仅仅是用于达到状态共享的目的.但是通常Redux是用于解决工程性问题的,用于分离业务与视图,让结构更 ...
- vuex、redux、mobx 对比
出处:https://www.w3cplus.com/javascript/talk-about-front-end-state-management.html 其实大部分概念都差不多,只不过VUEX ...
- 状态管理工具对比vuex、redux、flux
1.为什么要使用状态管路工具 在跨层级的组件之间传递信息,尤其是复杂的组件会非常困难.也不利于开发和维护,这时我们就a需要用到状态管理工具. 2.Flux
- flux,redux,vuex状态集管理工具之间的区别
一:redux和flux的区别 1)redux是flux中的一个实现 2))在redux中我们只能定义一个store,在flux中我们可以定义多个 3)在redux中,store和dispatch都放 ...
- Redux/Mobx/Akita/Vuex对比 - 选择更适合低代码场景的状态管理方案
近期准备开发一个数据分析 SDK,定位是作为数据中台向外输出数据分析能力的载体,前端的功能表现类似低代码平台的各种拖拉拽.作为中台能力的载体,SDK 未来很大概率会需要支持多种视图层框架,比如Vue2 ...
- 初识vuex
1.简介 vuex是 vue官方推荐的一个状态管理器.当我们遇到很多状态改变时,组件之间的通信就会变得复杂,这时候vuex的强大就展现出来. 我们从vuex的原理以及vuex的api两个部分介绍vue ...
- vue总结 08状态管理vuex
状态管理 类 Flux 状态管理的官方实现 由于状态零散地分布在许多组件和组件之间的交互中,大型应用复杂度也经常逐渐增长.为了解决这个问题,Vue 提供 vuex:我们有受到 Elm 启发的状态管 ...
- Vuex实践
本文来自网易云社区 作者:刘凌阳 前言 2017年对于Vue注定是不平凡的一年.凭借着自身简介.轻量.快速等特点,Vue俨然成为最火的前端MVVM开发框架.随着Vue2.0的release,越来越多的 ...
随机推荐
- input title 悬浮值
<!doctype html><html lang="en"> <head> <meta charset="UTF-8&quo ...
- 远程查看日志-linux
ssh 连接服务器 ssh user@www.xxx.com -p60022 用户名@ip 端口 进入日志所在目录 cat FILENAME 查看文本文件,P.S. 在查较大文件时为了避免刷屏,请使用 ...
- [RK3288][Android6.0] 系统按键驱动流程分析【转】
本文转载自:http://blog.csdn.net/kris_fei/article/details/77894406 Rockchip的按键驱动位于 kernel/drivers/input/ke ...
- HDU 4070 + 赤裸裸的贪心~~
J - Phage War Time Limit:1000MS Memory Limit:32768KB 64bit IO Format:%I64d & %I64u Phage ...
- luence全文检索(简介)
刚开始做全文检索也是找了很多资料但是网上的都不是很齐全luence是个很不多的工具 Lucene4.0的官网文档:http://lucene.apache.org/core/4_0_0/core/ov ...
- [疑问] C# 多线程程序,如果在并行程序块中开空间会远远慢于将空间开在并行块之外
// int[,] label = new int[m, n]; Parallel.For(, thread_num, (n) => { ]; i++) { int[] tmp = new in ...
- Java 高级数据结构 —— Properties
1. Properties Properties 是 Java 的内置实现: public class Properties extends Hashtable<Object,Object> ...
- 24. [Ext JS 4] 实战之Load Mask(加载遮罩)的显示与隐藏
转自:https://blog.csdn.net/oscar999/article/details/27176791
- codevs1183 泥泞的道路(01分数规划)
1183 泥泞的道路 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 钻石 Diamond 题目描述 Description CS有n个小区,并且任意小区之间都有两 ...
- linux Java环境变了配置
1. sudo /etc/profile 2.安装截图配置 输入javac 进行验证