- Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of the application and rules to ensure that the state changes in a predictable way. Vuex is also integrated into the official Vuex debugging tool DevTools plug-in for easy debugging.
- Vuex mainly solves the problem of state sharing between multiple components. Although state sharing can be achieved by using various communication modes of components, it is often necessary to maintain state consistency between multiple components. This mode is prone to problems and makes the program very complicated. Vuex by using simple interest global management model, the component of separate management for abstract Shared state, so that all the components can be used in the same way to access and modify data in a Vuex, ensures the consistency of the data, the data in the meanwhile Vuex is reactive, can guarantee the data the whole is a one-way flow of data, It makes our code more structured and maintainable.
- Vuex is not necessary, it helps us share state, but it brings more concepts and frameworks. If we don’t plan to develop large single-page applications or if our pages don’t have a lot of global state to maintain, then there’s no reason to use Vuex.
- When USING Vuex, I have the following understanding: First, I understand and apply the core concept: put the global state into the state object, which itself is a state tree, and use the state of the Store instance in the component to access these states; Then there are supporting mutation methods to modify these methods, and only mutation can be used to change the state. The commit method is called in the component to commit mutation. If there are asynchronous operations or complex logic combinations in the application, we need to write actions. After execution, if there are stateful changes, we still need to submit them to mutation. These actions are called in the component and distributed using dispatch method. Finally, modularity is used to organize the submodules by modules option. Add the name of the submodule when accessing the state. If the submodule has a namespace, then additional namespace prefixes are required when submitting mutation and distributing actiion.
- Vuex needs to achieve data responsiveness in the realization of single data flow. Through learning the source code, IT is realized by borrowing the data responsiveness feature of Vue. It will make use of Vue to treat state as data for reactive processing, so that these states change and components can be re-rendered.