preface
I hope this blog will be read by developers who have used Vuex. The purpose of reading this blog is to learn how to express yourself.
Here is the official Vuex documentation for learning about Vuex
basis
What is Vuex
We’re not in a hurry to answer that question. What about the official documents first
What is Vuex? Vuex is a state management mode developed specifically for vue.js applications. It uses centralized storage to manage the state of all components of an application and rules to ensure that the state changes in a predictable way.
The documentation states that Vuex is a state management mode. But we just told them it was state management, and they were stunned. So I suggest this answer.
Vuex is a state management pattern that exists to share reusable component state.
Vuex has several properties. What are the meanings of their existence
There are five types, including State, Getter, Mutation, Action, and Module.
State
Vuex uses a single state tree — yes, it contains all the application-level state in a single object. At this point it exists as a “unique data source (SSOT)”. This also means that each app will contain only one Store instance. A single state tree allows us to directly locate any particular state fragment and easily take a snapshot of the entire current application state during debugging.
The State property is a single State tree of Vuex
Getter
Sometimes we need to derive some state from the state in the store, such as filtering and counting lists
The Getter is similar to Vue’s computed object. State is handled according to the business logic to generate the properties required by the business.
Mutation
The only way to change the state in Vuex’s store is to commit mutation. Mutations in Vuex are very similar to events: each mutation has a string event type (type) and a callback function (handler).
Mutation is the only method used to change the state in Vuex.
Action
Actions are similar to mutation, except that they commit mutation rather than directly changing the state. Actions can contain any asynchronous operation.
The Action is created to address asynchronous operations and commits Mutation.
Module
Because of the use of a single state tree, all the states of an application are grouped into one large object. When the application becomes very complex, the Store object can become quite bloated. To solve these problems, Vuex allows us to split the Store into modules. Each module has its own state, mutation, action, getter, and even nested submodules — split the same way from top to bottom
Module is the object that modularizes Vuex for better maintenance.
What are the problems with not using Vuex
The purpose of Vuex is to share state. If Vuex is not used, the state of this centralized management becomes distributed management, resulting in reduced maintainability.
The advanced
We’ve already looked at basic interview questions, now we’re going to work on more advanced interview questions.
What does a module plus a namespace do
Namespaces By default, actions, mutations, and getters inside a module are registered in the global namespace — enabling multiple modules to respond to the same mutation or action. If you want your modules to be more wrapped and reusable, you can make them namespaced by adding namespaced: True. When a module is registered, all its getters, actions, and mutations are automatically named according to the path the module was registered with.
Namespace in VUEX is similar to scoped in vue scaffolding encapsulation, with the goal of privatizing properties.
There’s an extension here
If you want to use the Global state and getter, rootState and rootGetters are passed into the getter as the third and fourth arguments, Actions are also passed in through properties of the Context object. To distribute action or commit mutation within the global namespace, pass {root: true} as the third argument to Dispatch or COMMIT.
Similar to the
dispatch('someOtherAction'.null, { root: true }) // -> 'someOtherAction'
Copy the codeWhat types of data should be included in vuEX, and what types should not?
States shared by multiple components are suitable for vuEX.
What’s the difference between getting data from a Store and getting data from getters? What is the purpose of Getters?
Computational data alone makes no difference, but Getters can be reused across multiple components.
Describe the process of using asynchronous operations in VUEX
Use Dispatch within the component to trigger the Action method. Action calls the Mutation method. Mutation then changes the state.
The end of the
That’s basically the end of this blog. If I find something to add, I will write it again. Wish you a smooth interview and get the offer as soon as possible.