Redux vs Vuex

Redux与Vuex原理及区别比较

⭐ 核心原理对比

Redux原理

// Redux核心实现原理简化版
function createStore(reducer, initialState) {
            
  let state = initialState;
  const listeners = [];
  
  function getState() {
            
    return state;
  }
  
  function dispatch(action) {
            
    state = reducer(state, action);
    listeners.forEach(listener => listener());
    return action;
  }
  
  function subscribe(listener) {
            
    listeners.push(listener);
    return function unsubscribe() {
            
      const index = listeners.indexOf(listener);
      listeners.splice(index, 1);
    };
  }
  
  // 初始化state树
  dispatch({
             type: '@@redux/INIT' });
  
  return {
             getState, dispatch, subscribe };
}

Vuex原理

// Vuex核心实现原理简化版
class Store {
            
  constructor(options) {
            
    this.state = reactive(options.state || {
            });
    this.mutations = options.mutations || {
            };
    this.actions = options.actions || {
            };
    this.getters = {
            };
    
    // 初始化getters
    if (options.getters) {
            
      Object.keys(options.getters).forEach(key => {
            
        Object.defineProperty(this.getters, key, {
            
          get: () => options.getters[key](this.state)
        });
      });
    }
  }
  
  commit(type, payload) {
            
    if (!this.mutations[type]) {
            
      console.warn(`Unknown mutation type: ${
              type}`);
      return;
    }
    this.mutations[type](this.state, payload);
  }
  
  dispatch(type, payload) {
            
    if (!this.actions[type]) {
            
      console.warn(`Unknown action type: ${
              type}`);
      return Promise.resolve();
    }
    return this.actions[type](
      {
             state: this.state, commit: this.commit.bind(this) },
      payload
    );
  }
}

🌟 核心概念对比表

特性	Redux	Vuex
状态存储	单一store	单一store
状态修改	通过reducer纯函数	通过mutation方法
核心原则	不可变数据	可变数据(Vue响应式)
异步处理	中间件(如redux-thunk)	Actions内置支持
组织结构	扁平结构+combineReducers	模块化内置支持
工作流程	action → reducer → state	action → mutation → state
与框架绑定	框架无关	与Vue紧密绑定
数据响应原理	手动订阅机制	Vue响应式系统

数据流向对比

💡 代码示例对比

Redux代码示例

// 定义reducer
const counterReducer = (state = {
              count: 0 }, action) => {
            
  switch (action.type) {
            
    case 'INCREMENT':
      return {
             ...state, count: state.count + 1 };
    case 'DECREMENT':
      return {
             ...state, count: state.count - 1 };
    default:
      return state;
  }
};

// 创建store
const store = createStore(counterReducer);

// 定义action creator
const increment = () => ({
             type: 'INCREMENT' });
const decrement = () => ({
             type: 'DECREMENT' });

// 使用
store.dispatch(increment());
console.log(store.getState()); // { count: 1 }

// 组件中使用 (以React为例)
function Counter() {
            
  const count = useSelector(state => state.count);
  const dispatch = useDispatch();
  
  return (
    <div>
      <span>{
            count}</span>
      <button onClick={
            () => dispatch(increment())}>+</button>
      <button onClick={
            () => dispatch(decrement())}>-</button>
    </div>
  );
}

Vuex代码示例

// 创建store
const store = new Vuex.Store({
            
  state: {
            
    count: 0
  },
  mutations: {
            
    increment(state) {
            
      state.count++;
    },
    decrement(state) {
            
      state.count--;
    }
  },
  actions: {
            
    increment({
              commit }) {
            
      commit('increment');
    },
    asyncIncrement({
              commit }) {
            
      setTimeout(() => {
            
        commit('increment');
      }, 1000);
    }
  }
});

// 组件中使用
export default {
            
  computed: {
            
    count() {
            
      return this.$store.state.count;
    }
  },
  methods: {
            
    increment() {
            
      this.$store.commit('increment');
    },
    asyncIncrement() {
            
      this.$store.dispatch('asyncIncrement');
    }
  }
};