Vuex与Redux比较

由于Vuex和Redux都是从Flux中衍生出来，同时Vuex对Redux部分思想也有一些借鉴，所以Vuex和Redux有很多相同点。很多资料也有介绍两者的对比，但大部分讲解的比较抽象，较难理解。笔者整理两者异同点，同时配有标准案例进行说明。注意本文不是科普vuex和redux相关概念，相关知识内容可以在官方文档中查看。Vuex (opens new window)、Redux(opens new window)

  1. 异同点

    • 相同点

      • state 共享数据
      • 流程一致：定义全局state，触发，修改state
      • 原理相似，通过全局注入store。

    • 不同点

      • 从实现原理上来说：
        • Redux 使用的是不可变数据，而Vuex的数据是可变的。Redux每次都是用新的state替换旧的state，而Vuex是直接修改
        • Redux 在检测数据变化的时候，是通过 diff 的方式比较差异的，而Vuex其实和Vue的原理一样，是通过 getter/setter来比较的
      • 从表现层来说：
        • vuex定义了state、getter、mutation、action四个对象；redux定义了state、reducer、action。
          • vuex中state统一存放，方便理解；reduxstate依赖所有reducer的初始值
          • vuex有getter,目的是快捷得到state；redux没有这层，react-redux mapStateToProps参数做了这个工作。
          • vuex中mutation只是单纯赋值(很浅的一层)；redux中reducer只是单纯设置新state(很浅的一层)。他俩作用类似，但书写方式不同
          • vuex中action有较为复杂的异步ajax请求；redux中action中可简单可复杂,简单就直接发送数据对象（{type:xxx, your-data}）,复杂需要调用异步ajax（依赖redux-thunk插件）。
        • vuex触发方式有两种commit同步和dispatch异步；redux同步和异步都使用dispatch

    详细解释

    • Vuex

      • 类型
        • state: 共享数据
        • getter: 快捷state
        • mutation: 同步更新，只是简单都赋值
        • action: 异步更新，可以调用commit来触发同步mutation
      • 触发
        • commit 触发mutation同步操作
        • dispatch 触发action异步操作
      • 库结合（自带）
        • mapState
        • mapGetters
        • mapMutations
        • mapActions
      • 其他
        • UI跟state、action/dispatch相关
        • mutations 同步修改state。UI触发使用commit指令
        • action 内可以commit同步state或dispatch异步另外一个action。UI触发使用dispatch指令

    • Redux

      • 类型
        • store: 合并所有reducer，共享数据
        • reducer: 两个作用：1. 初始值合并获得state 2. 简单的赋值，获取新的state代替老的state
        • action: 触发函数。是唯一可以带上数据修改state的触发对象。接下逻辑就转移到reducer中

        注：也可以反过来理解：Vuex的每一次this.$store.commit('type', data) === action(data){ return { type, data}}）

      • 触发 (依赖react-redux)
        • dispatch触发同步或异步。使用mapDispatchToProps参数
      • 库结合（依赖react-redux）
        • mapStateToProps
        • mapDispatchToProps

    简单理解，reducer承担了state和mutations功能。 Vuex中commit-mutations是唯一修改state的方式；Redux中dispatch-reducer是唯一修改state方式

    Vuex典型案例

    // vuex非常简单易懂，而且整理到1个文件即可
const state: IState = {
  login: false,
  option: {
    _id: '',
    sub_title: '',
    title: '',
    keyword: '',
    descript: '',
    url: '',
    email: '',
    icp: ''
  }
}

const actions: ActionTree<IState, any> = {
  // 登录
  async login ({ commit }, user: StoreState.Login): Promise<Ajax.AjaxResponse> {
    commit('USER_LOGINING')
    const res: Ajax.AjaxResponse = await service.login({ ...user })
    commit('USER_LOGINING_FINAL')
    return res
  },
}

const mutations: MutationTree<IState> = {
  'USER_LOGINING' (state: IState): void {
    state.login = true
  },

  'USER_LOGINING_FINAL' (state: IState): void {
    state.login = false
  },
}

export default new Vuex.Store({
  state,
  actions,
  mutations,
  modules
})

    Redux典型案例

    // store.js
import { createStore, combineReducers, applyMiddleware } from 'redux'
import home from './home/reducer'
import demo from './demo/reducer'
import thunk from 'redux-thunk'

// reducers获得初始state
let store = createStore(combineReducers({ home, demo }), applyMiddleware(thunk))

export default store

    // reducer.js
let defaultState = {
    demoList: []
}

export default (state = defaultState, action) => {
    switch (action.type) {
        case 'setDemoList':
            return { ...state, demoList: action.list }
        default:
            return state
    }
}

    // action.js
// 同步action
export const setDemoList = list => ({
    type: 'setDemoList',
    list
})

// 异步action
export const setAsyncList = () => {
    return async dispatch => {
        let result = await API.getXXX()
        dispatch({type: 'setAsyncList', result})
    }
}

    // ui
const mapStateToProps = (state) => {
    return {
        list: state.demo.demoList
    }
}

// const mapDispatchToProps = (dispatch) => {
//     return {
//         setDemoList: list => dispatch(setDemoList(list))
//     }
// }
// or
const mapDispatchToProps = {setDemoList}

export default connect(mapStateToProps, mapDispatchToProps)(Demo)

    总结

    • vuex的流向：
      1. view——>commit——>mutations——>state变化——>view变化（同步操作）
      2. view——>dispatch——>actions——>mutations——>state变化——>view变化（异步操作）
    • redux的流向：view——>actions——>reducer——>state变化——>view变化（同步异步一样）

    参考文章

posted @ 2024-11-15 17:21  天然呆☆☆  阅读(25)  评论(0)  编辑  收藏  举报