Vue is basically a rental warehouse that stores data that can be shared by any component that wants to call it,

1.State

What is a vuex — — — — — the state?

State and similar data in vuEX. Why write state in VUEX?

The data data in vuEX is only partially applicable to the use of this component, and other components cannot obtain and use it. The state data in VUEX is global and can be used by any other component, but we can also modify the global store state data in a single component.

How is state used in components?

First we need to reference vuex globally, main.js, in this case to create a separate file store

// the main.js file import router from'./router';
import store from './store';

new Vue({
    router,
    store
})Copy the code


To use state in a component, you need to receive it when evaluating the property.

<template>{{a}} or {{a}} </template> import {mapState} from'vuex'
export default{
    computed:mapState({'a':A,'b':B})
}

Copy the code


or

computed:mapState([‘A’,’A’])

Mapstate can accept both objects and arrays. The result is an object.

2.Mutation

Mutations are similar to methods in components. In Mutations, the data of state can be modified, for example

State: {num: [1, 2, 3, 4]}, mutaions: {numChange (state) {state. The num [0] + +}}Copy the code

We can not call a mutation handler directly. This option is more like a time register. When a mutation of type incroment is triggered, this function is called. To ‘wake up a mutation handler’, you need to call the store.mit method with the corresponding type:

3.Action

The effect of the action

Mutation is like event registration, which requires corresponding conditional triggering. Action is like managing trigger conditions. Examples are as follows

Mutations :{sortNum(state,array){state.num=array.sort()}}, mutations:{sortNum(state,array){ Actions :{// action receives a commit or state sortNumStatus({commit},arr){var array; arr.forEach(item){if(item){array.push(item)}} // Commit Mutataion actions commit(sortNum,array)}}Copy the code

How is the Action event triggered?

Action is triggered in the component, the action is distributed, or the component’s methods are mapped to using the mapActions helper function

Store. Dispatch calls

import {mapActions} from 'vuex';

exportdefault{ methods:{ ... mapActions(['sortNumStatus'), // Or... mapActions({ add:'sortNumStatus'}),}} // Do not use the auxiliary function mapActionsexport default{
    methods:{
       this.$store.dispath('sortNumStatus',arr); }}Copy the code

4.Getter

Getters store public functions that can be invoked by components, similar to computed or filters in components. Computed and filters in components can only be invoked by a single component and cannot be used by multiple components.

state:{
    arr:4
},
getters:{
    evenOrOdd:state=>state.arr%2===0?'event':'odd'
}
Copy the code
<template>{{eventOrOdd}} or {{eventodd}}</template> import {mapGetter} from'vuex'; computed:{ ... mapGetters(['eventOrOdd'
    ])
}
//或者
computed:{
    ...mapGetters({
        eventodd:'eventOrOdd'})}Copy the code

Getters can accept not only state but other getters as arguments!