Shulou(Shulou.com)06/02 Report--

This article introduces the knowledge of "how to understand the use of vuex and frequently asked questions". In the operation of actual cases, many people will encounter such a dilemma, so let the editor lead you to learn how to deal with these situations. I hope you can read it carefully and be able to achieve something!

Let's start with frequently asked questions:

Using Vuex, you only need to execute Vue.use (Vuex) and pass an example of a store object in the configuration of Vue. How does store achieve injection? how does state internally support module configuration and module nesting? When executing dispatch to trigger action (commit is the same), you only need to pass in (type, payload). Where does the first parameter store in the action execution function come from? How can you tell whether the state is modified directly externally or through the mutation method? With these questions in mind, let's start with what vuex is.

What is vuex?

Vuex is a state management system dedicated to Vue, which is used to manage the data state of the page and provide unified data operation, which is equivalent to database mongoDB,MySQL, but its data is stored in memory, and the page refresh disappears.

II. The relationship between vue and vuex

Take a look at this example of vue response. Data, methods, and computed in vue can be implemented. The view can change the value of count in state by clicking on the event and triggering the increment method in methods. Once the count value changes, the function in computed can update the getCount to the view.

So what does vuex have to do with the responsive example of vue? The view can change the data in the state by clicking on the event and triggering the method in the mutations. Once the state data is changed, the getters reflects the data to the view. Then actions, it is understandable to deal with asynchronism, but simply add an extra layer. Now that we have mentioned mutions actions, we have to mention what is the use of commit,dispatch. In the vue example, the method in methods is triggered through the click event. When asynchrony exists and dispatch is needed in vuex to trigger methods in actions, commit in actions can trigger methods in mutations. Synchronization, the commit triggers the method in mutations in vuex directly in the component.

Third, vuex implementation

Let's take a look at the ability to change the state and update the view in vuex as in vue.

Store/index.js

App.vue

IV. Source code analysis

The store injection component install method vuex injects the component through the vue plug-in mechanism.

To use vuex first, you need to install the plug-in:

It can be seen that the way in which store is injected into the instance components of vue is accomplished through the mixin mechanism of vue and with the help of the life cycle hook beforeCreate of vue components. That is, during the instantiation of each vue component, the vuexInit method is called before the beforeCreate hook.

Two-way data binding in vuex

Getters implementation

From the above source code, we can see that the state status of Vuex is responsive, and the data of vue is responsive. The state is stored in the data of the vue instance component, while the getters of Vuex implements real-time data monitoring with the help of vue's calculation attribute computed.

Mutations implementation

Actions implementation

This is the end of the content of "how to understand the use and frequently asked questions of vuex". Thank you for reading. If you want to know more about the industry, you can follow the website, the editor will output more high-quality practical articles for you!

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.