#### 1.action ~~~ //input执行onChange事件派发一个action <Input value={this.state.inputValue} onChange={this.handleChange} /> handleChange = (e) => { const action ={ type:'change_input_value', value:e.target.value } store.dispatch(action); } ~~~ #### 2.store自动接收这个action #### 3.在ruducer中改变state的状态 ~~~ const defaultState={ inputValue:'hello', list:[1,2,3] }; /* state指store中的数据 */ /* reducer可以接收state,但不能修改state */ export default (state=defaultState,action)=>{ /* ruducer拿到之前的数据,和action中传递过来的数据作比对 */ if(action.type==='change_input_value'){ let newState = {...state} newState.inputValue = action.value; return newState; } return state; } ~~~ #### 4.在app.vue中订阅 ~~~ /* 订阅store的改变,只要store改变,handleStoreChange方法就会执行 */ store.subscribe(this.handleStoreChange); ~~~ #### 5.调用handleStoreChange方法，更新state的状态 ~~~ handleStoreChange=()=> { this.setState(store.getState()) } ~~~