First, VUEX is a state management tool. It holds some data common to each component. It is mainly used in large single page development.

Characteristics: follow a one-way data flow, data is responsive.

So let’s look at it in detail:

1. What is Vuex?

A. Not all data is stored in Vuex, only the data common to each component is stored in Vuex

B. Vuex is a public state management mode and not a database, so it is impossible to persist some data

When the user refreshes the browser, the data may disappear c. Vuex is mainly used in large single-page development

2. Vuex data transfer process

State is the public state. State is invoked within the component using the this.$store.state. ‘ ‘attribute. 4. Each method in actions accepts an object that contains a commit method. The method in mutations is used to modify the data in state. Any method in mutations will receive two parameters, one is the state in store and the other is to be passed to the parameters 6. When the method in mutations is implemented, the state will change, because the data of VUEX is responsive, so the state of the component will also change

3. Features of VUEX

Follow one-way data flow. 2. Data in Vuex is responsive

4. The role of 5 attributes in VUEX

How do I use helper functions

1. Introduce Vuex into the current component

2. Call auxiliary functions via Vuex

1. State: The data in state used to store the common state is reactive

Auxiliary function mapState

1. There are two ways to receive data in State in a computed property

Computed: vuex. mapState([" attribute "]) Computed: vuex. mapState({key:state=>state. Attribute})Copy the code

2. If your component also needs to use computed

computed:{... Vuex.mapState({key:state=>state. Attribute})}Copy the code

2. Actions: The actions function is used to handle asynchronous functions and some business logic. Each function has a parameter, which is an object and has a commit method, which is used to trigger the methods in mutations

The auxiliary function mapActions

use

methods:Vuex.mapActions([""]) methods:{... Vuex.mapActions({key:val-- >actions})}Copy the code

3. Mutations: The function in mutations is mainly used to modify the data in state. Mutations all methods have two parameters, one is the state in the store and the other is the parameter that needs to be passed

Use method of auxiliary function mapMutations

methods:Vuex.mapMutations([""]) methods:{... Vuex.mapMutations({key:val-- >actions)}Copy the code

Getters: Calculates properties. Getters is similar to computed in components and also monitors property changes. When a property in state changes, methods in Getters are triggered. Each method in getters has a parameter state

This.$store.getters. ‘ ‘method name

Helper function mapGetters

Mapgetters are used in computed components

1.

Vuex.mapgetters ({key:val-- "val") vuex.mapgetters ({key:val-- "val")Copy the code

Modules: Divides public state into modules

1. Each module acts as a mini-VUex

2. State getters Actions mutations will be included in every module

3. Remember to add a namespaced:true to export modules to make each module have its own namespace

The installation

yarn add vuex
Copy the code