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

This article is about how vuejs implements global state management. The editor thinks it is very practical, so share it with you as a reference and follow the editor to have a look.

In vuejs, vuex can be used to realize global state management; Vuex is a state management mode specially developed for Vue.js applications, which can be used to manage global data and manage the data state of complex applications, such as the communication of sibling components, the transfer of values of multi-layer nested components, and so on.

The operating environment of this tutorial: windows7 system, vue2.9.6 version, DELL G3 computer.

Vuex global state management

Vuex is a state management model developed specifically for Vue.js applications. You can manage the data state of complex applications, such as the communication of sibling components, the passing values of multi-layer nested components, and so on.

Generally speaking, vuex is global data management, which is used to manage global data. The original data management of vue can only transfer data between parent and child components, and it is not convenient to use vuex to manage global data. All data can be stored in vuex and called when used.

The core of vuex:

State

Mutations

Actions

Getter

The usage of Vuex

Install and use vuex

Installation

1. Install in the project

Npm install vuex-save

two。 Create a new store.js file

Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) const store = new Vuex.Store ({state: {/ / storing initial data count: 0}, mutations: {/ / method for storing modified data increment (state) {state.count++})

Usage data

Method 1: use $store to call

Use this.$store.state to invoke data directly in a component

This.$store.state. Data name

Method 2: import mapState, expand the mapping of the data in the component, need to write to the calculation attribute, and write count directly when you use it.

/ / Import mapStateimport {mapState} from 'vuex'computed: [... mapState ([' count'])]

When operating on the data, the data of state cannot be called directly. If you want to modify the data, you need to write the method in mutation. The purpose is to find out where to go except for the problem.

The function and usage of Mutations

Mutations is used to write methods for manipulating data.

Mutations: {/ / method for storing modified data add (state) {state.count++}}

Mode of use 1:

Trigger the mutations function and use commit to call the method name in it

This.$store.commit, this is the first way to trigger mutation.

Methods: {handle () {this.$store.commit ('add')}}

Mutations can pass two parameters in the method of passing parameters mutation, the first is state, and the second is the custom parameter payload

Mutations: {/ / method for storing modified data addN (state,N) {state.count+=N}}

The call is in the method of the component

Methods: {handle2 () {/ / triggers mutation and passes parameter this.$store.commit ('addN',4)}}

Method 2

Import the mapMutations function in vuex into the component

MapMutations (['sub']) is to map the methods in it to those in store.

... Is the unfold operator

Import {mapMutations} from 'vuex'methods: {/ / write the method name in [] [' addN','sub']... mapMutations (['sub']) btnhandle () {/ / write this directly when called. Method name this.sub () / / when a parameter is passed in, write the parameter directly, without writing state this.addN (4)}}

Note: asynchronous code cannot be written in Mutation functions; for example, write timing functions, although the page will change, but the actual state value will not change. So there's actions.

The usage of Actions

Action is used to handle asynchronous tasks.

If you change the data through an asynchronous operation, you must use Action instead of Mutation, but you still have to change the data indirectly by triggering Mutation in Action.

Write an actions at the same level as mutations in store: {} call the method of mutations in it, and then trigger Actions in the component

Mutations: {/ / the method add (state) {state.count++}} is used to store modified data. Actions: {/ / context is the context addAsync (context) {setTimeout (()) = > {/ / call the add method. Data in state cannot be modified directly in actions. Only mutation has the right to context.commit ('add')})}}

To use actions to trigger using dispatch in the component

BtnHandle () {/ / dispatch specifically triggers action this.$store.dispatch ('addAsync')}

Actions transfer parameters

Both actions and mutations of store have to write formal parameters.

Mutations: {/ / pass parameter addN (state,n) {state.count+=n}}, actions: {/ / context is the context addAsync (context,n) {setTimeout (() = > {/ / call the add method and pass parameter context.commit ('addN',n)})}}

Write real parameters in a component

BtnHandle () {/ / dispatch specifically triggers action and passes in the parameter this.$store.dispatch ('addAsync',5)}

The second is to expand and map into mapActions.

/ / introduce the method import {mapActions} from 'vuexmethods: {/ / Mapping actions. MapActions ([' addAsync']) btnhandle () {/ / call the corresponding actions this.addAsync ()}} / / or you can write the mapped method name directly on the click action without writing the btnhandle method.

Note: call the actions method in the component and call the mutations method in actions using commit

Getters

Getter is used to process the data in Store to form new data. The original data will not be modified

Getter can process the existing data in Store to form new data, similar to the computational properties of Vue.

When the data in Store changes, so does the data in Getter.

State: {count:0}, getters: {showNum (state) {return 'the latest data is:' + state.count}}

The first method of calling: this.$store.getters. Method name

This.$store.getters.showNum

The second invocation method: mapping expansion, mapping in computed

Import {mapGetters} from 'vuex'computed: {. MapGetters ([' showNum'])} Thank you for reading! This is the end of the article on "how to achieve global state management in vuejs". I hope the above content can be of some help to you, so that you can learn more knowledge. if you think the article is good, you can share it for more people to see!

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.