As a state management library, Vuex is similar to Redux and almost identical in concept. Personally, Vuex is easier to use than Redux, perhaps because it is easier to understand Vuex with Redux. Here’s a quick comparison to help us learn to use them better, without code.

1. Comparison of core concepts

The core concept of Redux The core concept of Vuex
Actions (synchronous actions, or asynchronous operations with middleware, do not change the store, just describe how to change the store) Mutation (for synchronous operations), Action (can be used for asynchronous operations, commit mutation)
Reducer (Pure function, calculate new stores based on actions and old stores Mutation changes state directly
Store (single data source) State (single data source)

Other:

I) Redux provides the store.getState() API to get the store tree, and the Store.subscribe (listener) API to subscribe to store changes and call the listener when the store changes; Vuex has a getter concept that is used to derive data based on state. Like Vue’s calculated properties, when state changes, a result is recalculated and provided to the desired component.

Ii) For large projects, when the application state data is too complex, the state can be divided to facilitate the management of data flow. Redux can combine the reducer of each component with combineReducers (). Each component can separately manage its own state and finally merge into a reducer to generate a store. Vuex uses the concept of Module to classify stores and, like Redux, can nest child states in multiple layers.

Iii) Bind state data to view: Redux can map state to view using react-redux to map to the React component, or Redux can update the view directly using store. Subscribe () to store changes. So Redux can be used not only with React, but also with other frameworks like Vue; Vuex can only be used for Vue. It provides mapState, mapAction, mapMutations and other apis to map store to Vuex components, which references mapStateToProps of React-Redux.

2. Principles of use:

Redux’s three principles:

(1) Single data source (a Redux app has only one store) is also one-way data flow; (2) State is read-only. (The only way to change state is to trigger an action, which is a generic object that describes events that have occurred.) ; (3) Use pure functions (reducer) to modify state.Copy the code

The three principles of Vuex:

A. Application level state should be centralized into a single Store object. B. Submitting mutation is the only way to change the state, and the process is synchronous. C. Asynchronous logic should be wrapped in actions.Copy the code

3. Handle asynchronous operations

Redux-thunk redux-thunk redux-thunk redux-thunk redux-thunk redux-Thunk redux-Thunk redux-Thunk redux-Thunk redux-Thunk redux-Thunk redux-Thunk redux-Thunk Wait for the asynchronous result to come out and then put the action in the action dispatch, and this function is called “Action Creator”), you can put the asynchronous logic in the Action Creator, Do a reverse of control with Action Creator, pass dispatch to Action Creator, and dispatch the action. Instead of creating a separate concept for asynchronous logic, Redux does not create a separate concept for asynchronous logic. It makes use of the middleware mechanism implemented by Redux. The middleware processes the action from dispatching an asynchronous action to the reducer. Results obtained through asynchronous operations during this period can be put into actions and then distributed to reducer through dispatch. After dispatching an action before, this action immediately arrived at reducer, so it is synchronous action. Now in Action Creator, we can wait for the result of an asynchronous operation to be regenerated as an action by reversing control, so it is called an asynchronous action:

Vuex used mutation to correspond to the action of Redux. In addition, Vuex created an action to submit mutation and realized that the asynchronous operation result could reach the state through asynchronous mutation.

Please ignore my poor drawing style