Vuex和Redux都是状态管理库，它们的工作原理和区别如下：
- Vuex定义了state、getter、mutation、action四个对象，而Redux定义了state、reducer、action。
- Vuex中state统一存放，方便理解；Redux中state依赖所有reducer的初始值。
- Vuex有getter，目的是快捷得到state；Redux没有这层，react-redux mapStateToProps参数做了这个工作。
- Vuex使用可变数据，而Redux使用不可变数据。
- Vuex通过Actions来处理异步操作，可以在Actions中执行异步逻辑，然后再提交Mutations来修改状态；而Redux可以使用中间件（如redux-thunk、redux-saga）来处理异步操作。
下面是一个简单的Vuex示例，用于管理一个购物车中的商品数量：
import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { cartCount: 0 }, mutations: { increment (state) { state.cartCount++; }, decrement (state) { state.cartCount--; } }, actions: { addToCart ({ commit }, product) { commit('increment'); }, removeFromCart ({ commit }, product) { commit('decrement'); } } }); export default store;
在组件中，可以通过this.$store来访问Vuex的state、getter、mutation和action。例如，以下代码将显示购物车中的商品数量：
<template> <div> <p>Your cart has {{ cartCount }} items.</p> </div> </template> <script> export default { computed: { cartCount () { return this.$store.state.cartCount; } } }; </script>
下面是一个简单的Redux示例，用于管理一个计数器的状态：
首先，需要安装Redux和React-Redux库：
npm install redux react-redux
创建一个Redux store：
import { createStore } from 'redux'; import rootReducer from './reducers'; const store = createStore(rootReducer);
编写一个reducer来管理计数器的状态：
import { INCREMENT, DECREMENT } from './actions'; const counterReducer = (state = 0, action) => { switch (action.type) { case INCREMENT: return state + 1; case DECREMENT: return state - 1; default: return state; } };
定义一些actions来改变计数器的状态：
export const increment = () => ({ type: 'INCREMENT' }); export const decrement = () => ({ type: 'DECREMENT' });
在React组件中使用Redux store：
import { connect } from 'react-redux'; import { increment, decrement } from './actions'; const Counter = ({ count, onIncrement, onDecrement }) => ( <div> <p>Count: {count}</p> <button onClick={onIncrement}>Increment</button> <button onClick={onDecrement}>Decrement</button> </div> ); const mapStateToProps = (state) => ({ count: state }); const mapDispatchToProps = { increment, decrement }; export default connect(mapStateToProps, mapDispatchToProps)(Counter);
