#### 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()) } ~~~