VUEX Getting Started Tutorial

What is VUEX?

The explanation of the official: Vuex is a state management mode specially developed for the Vue.js application. It uses a status of all components of the centralized storage management application, and changes in a predictable manner in a predictable manner in a corresponding rule.

I believe that many new players have a desperate feeling. I am also like this, and then I think of a bit!

For example, there are 5 small classes, 25 students in each small class, but only one teacher lecture, if 5 small classes correspond to 5 components, 25 students in each class are equivalent to each 25 data in a component, this teacher is equivalent to Vuex, the teacher’s class is equivalent to each data. To ensure that each classmate is affected by the same education, it is necessary for this teacher to tell each lesson 5 times, and cannot guarantee the same effects of each class. After a while, the teacher felt that this is very troublesome, I want to have a way, I have found a big classroom, combined with these 5 small classes, so that every course is just right, but also It is guaranteed that each class’s classmates heard the same effect. This is the role of Vuex, uniformly manages the data used in each component, synchronously distributes, and save time and effort.

How is this VUEX? Let us start from a simple VUE count

1. Initialize and create an item

  2. Mount Vuex  

3. In SRCreate a Store.js file in the directory and import and configure
 in main.js file   
Import Vue from ‘Vue’ // Introduced Vuex and UseImport Vuex from ‘Vuex’Vue.use (Vuex)

main.js file

  Import Vue From './app.vue'Import Store from' ./assets/store '// Import Store Object New Vue ({// Configure Store Option, specified as Store Objects automatically injects the Store object into all subcomponents and pass this in subcomponents through this. $ Store Access the Store Object Store, el: '#app', render: h => h (app)}  
4. Edit Store.js File

Before applying Vuex, we still need to understand this flowchart, which is very simple.
1 Vue Components is our Vue component, and the component will trigger (Dispatch) some events or action, that is, Actions; 2 Our actions issued in the component, must be able to get or change data, but in Vuex, data is centrally managed, we can’t change the data directly, so you will submit this action (commit) To Mutations;
3MUTATIONS will change data in MUTATESTATE;

4 When data in state is changed, render (render) to Vue Components, the component shows the updated data, completes a process. The core of VUEX is the Store, which is equivalent to a container, a way to include the following properties:

state definition attribute (status, data)


Vuex 入门教程 // Define Properties (Data) Var State = {Count: 6} // Create a Store Object const store = New Vuex.Store ({State}) // Export Store Objects Export Default Store;

Method 1 can pass this in app.vue. $ store Access STORE object, get the count.

// Write the count method to execute

EXPORT DEFAULT {name: ‘app’, computed: {count () {// Returns the obtained data returnid this. $ Store.state.count}}

MapGetters and MaPActions provided by Vuex to access
 MapGetters to getProperty (data)   
1 Inapply, MapGetters

Import {MapGetters} from ‘Vuex’
   2 Call the MapGetters assist method in the calculation properties of the app.vue file, and passed into an array, specifying the attribute count 


 Import {MapGetters, MaPActions} from 'Vuex'Export Default {name:' app ', compute: mapgetters ([// here "here) corresponds to the count in Getters in the following store.js file 'count']}    3 Define the getters method in Store.js and export  
getters to obtain attributes

Import Vue from ‘Vuex’Vue.use (Vuex) // Define Properties (Data) Var State = {Count: 6} / / Definition Gettersvar getters = {// Need to pass a parameter to get the state property count (state) {return state.count}} // Create a Store object const store = new ({State, getters}) // Export Store object EXPort Default Store;

This page will be displayed on the page! Next, we will change the data acquired by action
4 in Store.js and export
  Actions definition method (action)  
Commit Submit change, the only way to modify the data is to display Mutations

MUTATIONS definition change, processing status (data) change

Import Vue from ‘Vuex’Vue.use (Vuex) // Define Properties (Data) Var State = {Count: 6} // Define GettersVar getters = {Count (state) {Return State .count}} // Define Actions, the action to be executed, such as the process judgment, asynchronous request const actions = {// ({commit, state}) This method is an object in ES6 Deconstruction Increment ({commit, state} ) {// Submit a change in Increment, the name can be customized, can be considered a type name, with the INCREMENT corresponding // Commit in the lower mutations, modifying the unique way of modifying the Mutations Commit (‘ Increment ‘)}} // Defines MUTATIONS, process status (data) CONST MUTATIONS = {//’ Incremen from above CommITT ‘corresponds to INCREMENT (STATE) {state.count ++;}} // Create a Store object const store = new Vuex.Store ({Store, Getters, Actions, Mutations}) // Export Store object Export Default Store;

5 In the app.Vue introduced MapActions, and calls

mappactions to obtain methods (action)
Import {mapGetters, MaPActions} from ‘Vuex’
Call the MapActionS assist method, and passed into an array, specifying to be obtained in the array Method Increment

// This increment method is incremented by increment in Methods below

   Import {MapGetters, MaPActions} from 'Vuex'Export Default {name:' app ', compute: mapGetters ([' count ']), MAPACTIONS: MAPACTIONS ([// This increment "】} [1 from Increment 'Increment',])} in the Action.js exported from Store.js23] 
This will change the obtained COUNT by Button.

It seems to be quite winding, need to understand the principles, then ponder, deepen understanding.
The above is all the content of this article, I hope to help everyone, I hope everyone will support Tumi Cloud.
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment