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

This article mainly explains "how to install and use VueX". Interested friends may wish to have a look at it. The method introduced in this paper is simple, fast and practical. Let's let the editor take you to learn how to install and use VueX.

1. Install vuex dependency package npm install vuex-save2, import vuex package import Vuex from 'vuex'Vue.use (Vuex) 3, create store object export default new Vuex.Store ({/ / state stores global shared data state: {count: 0}}) 4, mount store object to vue instance new Vue ({el:' # app', render: h = > h (App), router, / / the shared data object to be created If you mount / / all the components in the Vue instance, you can directly use store to obtain global data. Store})

Vuex is a state management model developed specifically for Vue.js applications. It uses centralized storage to manage the state of all components of the application, and uses corresponding rules to ensure that the state changes in a predictable way.

Core modules: State, Mutations, Actions, Module, Getters

Create a new Addition.vue file in the components directory:

The current latest count value is: + 1

Subtraction.vue file:

The latest count value is:-1

Open the App.vue file and introduce two components:

-

Import Addition from'. / components/Addition'import Subtraction from'. / components/Subtraction'export default {components: {'my-addition': Addition,' my-subtraction': Subtraction}, data () {return {}} (1), State:

State provides a unique announcement data source, and all shared data should be stored in Store's State. The data we need to save is saved here, and the data we define can be obtained through this.$store.state on the page.

/ / create a store data source that provides unique public data const store = new Vuex.Store ({state: {count: 0}})

The first way for a component to access data in Store:

This.$store.state. Global data name

The second way for components to access data in Store:

/ / 1. Import the mapState function import {mapState} from 'vuex' from vuex on demand

Through the mapState function just imported, map the global data needed by the current component to the computed calculation property of the current component:

/ / 2. Map the global data to the calculation property of the current component computed: {... mapState (['count'])}

Open the store/index.js file and define count:

Import Vue from 'vue'import Vuex from' vuex'Vue.use (Vuex) export default new Vuex.Store ({state: {count: 0}, mutations: {}, actions: {}, modules: {}})

Go back to the Addition.vue file, in the first way:

The latest count value is: {{$store.state.count}} + 1

Go back to the Subtraction.vue file and use the second way:

The latest count value is: {{count}}-1import {mapState} from 'vuex'export default {data () {return {}}, / / calculation attribute computed: {... mapState ([' count']) / / use. The expansion operator expands the Count in the resource attribute}}

The effect picture at this time:

(2) Mutations:

Mutations is used to change the data in the Store. Only functions in mutation have the right to modify the data in state. Mutation is very similar to events: each mutation has an event type of a string (type) and a callback function (handler). However, mutation only allows synchronous functions and cannot write asynchronous code.

① can only change Store data through mutation, not directly manipulate the data in Store.

② is a little more cumbersome to operate in this way, but it can centrally monitor all data changes.

Definition:

/ / define Mutationconst store = new Vuex.Store ({state: {count: 0}, mutations: {add (state) {/ / change status state.count++})

The first trigger method:

/ / trigger mutationmethods: {handleAdd () {/ / the first way to trigger mutations this.$store.commit ('add')}}

Open the store/index.js file and define mutations:

Mutations: {add (state) {state.count++}}

Go back to the Addition.vue file and trigger:

The latest count value is: {{$store.state.count}} + 1export default {methods: {handleAdd () {this.$store.commit ('add')}

Click the + 1 button at this point and you can see that the value changes to 1.

You can also pass parameters when mutations is triggered:

/ / define Mutationconst store = new Vuex.Store ({state: {count: 0}, mutations: {addN (state, step) {/ / change status state.count + = step})

The first trigger method:

/ / trigger mutationmethods: {handleAdd () {this.$store.commit ('addN', 3)}}

Open the store/index.js file and add an addN:

Mutations: {add (state) {state.count++}, addN (state, step) {state.count+ = step}}

Back in the Addition.vue file, add a + N button and add click events:

The latest count values are: {{$store.state.count}} + 1 + Nexport default {data () {return {num: 2}}, methods: {handleAdd () {this.$store.commit ('add')}, handleAdd2 () {/ / commit is the function of calling a mutation function this.$store.commit (' addN', this.num)}}

Clicking the + N button at this time will increase by 2 each time.

The second way to trigger mutations:

/ / 1. Import the mapMutations function import {mapMutations} from 'vuex' from vuex on demand

Through the mapMutations function you just imported, map the required mutations function to the methods method of the current component:

/ / 2. Map the specified mutations function to the methods function of the current component: methods: {... mapMutations ({'add',' addN'})}

Open the store/index.js file and add a sub to mutations:

Mutations: {add (state) {state.count++}, addN (state, step) {state.count+ = step}, sub (state) {state.count--}}

Go back to the Subtraction.vue file and add a click event to the-1 button:

The latest count value is: {{count}}-1import {mapState, mapMutations} from 'vuex'export default {data () {return {}}, / / calculation attribute computed: {... mapState ([' count']) / / use. The expansion operator expands Count in the resource attribute}, methods: {... mapMutations (['sub']), handleSub () {this.sub ()}

When you refresh the page, click the-1 button and it will be-1 each time.

Open the store/index.js file and add a subN:

Mutations: {add (state) {state.count++}, addN (state, step) {state.count+ = step}, sub (state) {state.count--}, subN (state, step) {state.count- = step}}

Back in the Subtraction.vue file, add a-N button and add a click event:

-Nimport {mapState, mapMutations} from 'vuex'export default {methods: {... mapMutations ([' sub', 'subN']), handleSub () {this.sub ()}, handleSub2 () {this.subN (2)}

Click the-N button at this time, and it will be-2 each time.

The following requirement is to delay the display of the changed value by 1 second after clicking the + 1 button.

Note: do not perform asynchronous operations in the mutations function. So you need to use Action to handle asynchronous tasks.

(3) Actions:

Action is used to handle asynchronous tasks.

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

Definition:

/ / define Actionconst store = new Vuex.Store ({/ /... Omit other code mutations: {add (state) {state.count++}}, actions: {addAsync (context) {setTimeout (() = > {context.commit ('add')}, 1000)})

The first method triggers:

/ / trigger Actionmethods: {handleAdd () {/ / the first way to trigger actions this.$store.dispatch ('addAsync')}}

Open the store/index.js file and add an addAsync:

Actions: {addAsync (context) {setTimeout (()) > {/ / in actions, the data in state cannot be modified directly / / the function of a mutations must be triggered by context.commit () to context.commit ('add')}, 1000)}}

Back in the Addition.vue file, add a + 1 Async button and add click events:

+ 1 Asyncexport default {methods: {handleAdd () {this.$store.commit ('add')}, the function of handleAdd2 () {/ / commit is to call a mutation function this.$store.commit (' addN', this.num)}, handleAdd3 () {this.$store.dispatch ('addAsync')}

Click the + 1 Async button at this time to achieve the function of + 1 after a delay of 1 second.

Take parameters when triggering an actions asynchronous task:

Definition:

/ / define Actionconst store = new Vuex.Store ({/ /... Omit other codes mutations: {addN (state, step) {state.count + = step},}, actions: {addNAsync (context, step) {setTimeout (() = > {context.commit ('addN', step)}, 1000)}}))

Trigger:

/ / trigger Actionmethods: {handleAdd () {/ / call the dispatch function and trigger actions with the parameter this.$store.dispatch ('addNAsync', 5)}}

Open the store/index.js file and add an addNAsync:

Actions: {addAsync (context) {setTimeout (()) = > {/ / in actions The data in state cannot be modified directly / / the function of a mutations must be triggered by context.commit () to context.commit ('add')}, 1000)}, addNAsync (context, step) {setTimeout (() = > {context.commit (' addN', step)}, 1000)}}

Back in the Addition.vue file, add a + N Async button and add click events:

+ N Asyncexport default {methods: {handleAdd4 () {/ / calls the dispatch function and triggers the actions with the parameter this.$store.dispatch ('addNAsync', 5)}

Click the + N Async button at this time to achieve the function of + 5 after a delay of 1 second.

The second way to trigger actions:

/ / 1. Import the mapActions function import {mapActions} from 'vuex' from vuex on demand

Through the mapActions function you just imported, map the required actions function to the methods method of the current component:

/ / 2. Map the specified actions function to the current component's methods function methods: {... mapActions (['addAsync',' addNAsync'])}

Open the store/index.js file and add a subAsync to actions:

Actions: {addAsync (context) {setTimeout (()) = > {/ / in actions The data in state cannot be modified directly / / the function of a mutations must be triggered by context.commit () to context.commit ('add')}, 1000)}, addNAsync (context, step) {setTimeout (() = > {context.commit (' addN', step)}, 1000)} SubAsync (context) {setTimeout () = > {context.commit ('sub')}, 1000)}}

Back in the Subtraction.vue file, add a button of-1 Async and add a click event:

-1 Asyncimport {mapState, mapMutations, mapActions} from 'vuex'export default {methods: {... mapMutations ([' sub', 'subN']),... mapActions ([' subAsync']), handleSub () {this.sub ()}, handleSub2 () {this.subN (2)}, handleSub3 () {this.subAsync ()}

There is an easier way to do this:

-1 Asyncimport {mapState, mapMutations, mapActions} from 'vuex'export default {methods: {... mapActions ([' subAsync'])}}

The effect is the same.

Let's use the same idea to implement the asynchronous operation of-N:

Open the store/index.js file and add a subNAsync:

Actions: {subNAsync (context, step) {setTimeout (()) = > {context.commit ('subN', step)}, 1000)}}

Go back to the Subtraction.vue file and add a button for-N Async:

-N Asyncimport {mapState, mapMutations, mapActions} from 'vuex'export default {methods: {... mapActions ([' subAsync', 'subNAsync'])}}

At this time, click the-N Async button, you can achieve a delay of 1 second after-3 function.

(4) Getters:

Getter is used to process the data in Store to form new data. It does not modify the source data in state, but acts as a wrapper to change the data in state into a form and return it.

① 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 packaged by Getter.

Definition:

/ / define Getterconst store = new Vuex.Store ({state: {count: 0}, getters: {showNum: state = > {return 'the latest quantity is [' + state.count +']'})

The first way to use getters is:

This.$store.getters. Name

We can delete the text and replace it with getters:

Open the store/index.js file and define getters:

Getters: {showNum (state) {the latest quantity of return'is ['+ state.count +]'}}

Go back to the Addition.vue file to modify:

{{$store.getters.showNum}}

At this point, the refresh page has become the content of the getters, and the effect image:

The second way to use getters is:

Import {mapGetters} from 'vuex'computed: {... mapGetters ([' showNum'])}

Open the Subtraction.vue file to modify:

{{showNum}} import {mapState, mapMutations, mapActions, mapGetters} from 'vuex'export default {/ / calculation attribute computed: {. MapState ([' count']), / / use. The expansion operator expands Count into resource properties... mapGetters (['showNum'])}}

Effect picture:

At this point, I believe you have a deeper understanding of "how to install and use VueX". You might as well do it in practice. Here is the website, more related content can enter the relevant channels to inquire, follow us, continue to learn!

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.