Talk about how to use VUEX to perform status management (small knot)

Why is a status management

A Vue component is divided into data (Model) and view. When updating data through methods in Methods, the view will be updated.

{{Message}} change content
Export Default {name: "Message", DATA () {Return {Message: 'Hello'};}, methods: {changeMessage () {this.Message = 'I am fine'}}}
MESSAGE and CHANGEMESSAGE () in this example can only be used in the Message.Vue component. In practical applications, common is the requirements for cross-assemblies sharing data. At this time, you can use Vuex to be elegant and efficiently managed. O (_∩) O ~
Note: Vuex has a certain technical threshold, which is mainly used in large orders of multiplayer development. Page application. Therefore, whether Vuex is used depending on the team size and technical reserves.

2 Installing Vuex

说说如何使用Vuex进行状态管理(小结) NPM Install –save Vuex

Installed version: Vuex@3.1.0

 3.1 Introducing Vuex   In introducing Vuex: 

… // Introduced Vuex plugin import vuex from ‘vuex’; … // Load Vuex plugin Vue.use (Vuex); // Vuex Configure const store = new ({state: {. .}, mutations: {…}}); … New Vue ({EL: ‘#App’, … // Using Vuex Store: Store, …})

The Store in VUEX contains the data status and operation of the application. The data in the Store changes, and components that use these data will be updated immediately.

3.2 Define Data Data Defines in the status attribute of Vuex.

We take counter as an example. Define a count data and initialize 0:

 Const Store = new Vuex.Store ({State: {Count: 0});   
3.3 Read Data

After the data is defined, you can read it in the VUE component through

$ store.state.count

, for example Index.Vue can be written in this:

… {{Count}} …

Export Default {name: “index.vue”, computed: {count () {Return this. $ store.state.count;}},
  Here, the current value of the counter is read from the Store of Vuex using the calculation properties.  3.4 Modifying Data 
Using Vuex’s MUTATIONS attribute, you can modify the data defined in State. We define growth and reduction in the counter:

const store = new ({state: {count: 0}, mutations: {increment (state, n = 1) {State.count + = N;}, Decrease (state) {state.count–;}}});

The function in MUTATIONS can be Two into the parameters. The first inclusion is State, and the second incoming parameters can be any type. For example, here you can specify an increase in new operation, if you do not specify, the growth amount is default 1.

Note: If you need to pass multiple parameters, then we can enter a target with multiple parameters here.
 The syntax for setting the default value is used here.  Increment (state, n = 1)  is equivalent: 
Increment (state, n) {n = N || 1;} In the * .vue component, Mutations is performed by
this. $ Store.commit
method. In Index.Vue, we added three buttons for “+1”, “- 1” and “+3” operation:


Export Default {… methods: {handleincrement () {this. $ store.commit (‘increment’);}, handledecrease () {this. $ store.commit (‘Decrease’);}, handleincreme () {this. $ store.commit (‘increment “, 3);}}}

THIS. $ Store.commit

Method is the function name defined in MUTATIONS.

can also be submitted by specifying Type, the value of TYPE is the function name defined in MUTATIONS: main.js

 Const Store = New Vuex.Store ({State: {Count: 0}, Mutations: {... IncrementByparam (State, Params) {State.count + = params.count;}}});   

{{count}} ... + 30

EXPORT DEFAULT {… Methods: {… HandlebyParam () {this. $ Store.commit ({type: ‘incrementByParam’, count: 30});} ,}}
  Note: If data is operated in MUTATIONS, the components will not be able to change the data immediately after commit commit. So, in Mutations, it is recommended to use a synchronous method to operate data.  
© Copyright Notice
Just support it if you like
comment Grab the couch

Please log in to comment