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

This article mainly introduces the relevant knowledge of "what is the core of vuex". The editor shows you the operation process through an actual case, and the operation method is simple, fast and practical. I hope this article "what is the core of vuex" can help you solve the problem.

Vuex is a js library specially designed to help vue manage. It makes use of the fine-grained data response mechanism in vue.js for efficient state updates.

The core of vuex is that store,store is a warehouse, where a single store state tree is used, and an object contains all the application-level states, which makes each application contain only one store instance. This single state tree allows us to directly locate arbitrary code fragments and easily take a snapshot of the current application during debugging.

Const store = new Vuex.Store ({

State: {

Count: 0

}

Mutations: {

Increment (state) {

State.count++

}

}

Actions: {

AsyncIncrement ({commit}) {

SetTimeout () = > commit ('increment'), 100)

}

}

})

State is the only data source in vuex, which is consistent with the rules of state in vue, and is responsive. Because of this, vue component can return the value read in vuex through the computed property, thus responsively following the changes in state to render. In addition, we also need to derive some states from state in store, such as filtering data. Vuex allows us to define getter in store, which can be thought of as a computational attribute of store. So the return value in getter is cached according to its dependency and will only be recalculated when its dependency changes. These are vuex read operations.

So how do you change the state in vuex?

The only way to change the state of vuex is that mutation in mutation,vuex is very similar to events. Each mutation has an event type of a string and a callback function. We can modify the data of store synchronously through the commit method of store. It is important to note that mutation must be a synchronization function. Just because mutation is synchronous, we can subscribe to mutation changes through the plug-in mechanism provided in vuex. In these plugins, we can manage or do data monitoring related work.

So how do you accomplish asynchronous operations in vuex?

Vuex allows action to complete the asynchronous operation. We can use the dispatch method of store to trigger the corresponding action operation, and then complete similar API acquisition or asynchronous operation in action. In the callback function after the asynchronous operation is completed, use commit to trigger mutation to change the data in state.

This is the end of the content about "what is the Core of vuex". Thank you for your reading. If you want to know more about the industry, you can follow the industry information channel. The editor will update different knowledge points for you every day.

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.