Vue---Vuex state management core

Table of contents

1. What does Vuex do

2. Vuex state management core

（1）State

（2）Getter

 （3）Mutation

（4）Action

---

1. What does Vuex do

The emergence of vuex is to manage the data interaction between components more conveniently, and it is a state management mode. The core of Vuex we use four most commonly: State, Getter, Mutation, Action.

2. Vuex state management core

（1）State

State is the state, which stores the data in the component, as shown in the following code.

 

//Homeview.vue
<template>
  <div class="home">
   //使用如下方式读取state中的数据
    <p>cou={
    
    { $store.state.cou }}</p>
  </div>
</template>

//store中的index.js  也就是vuex的配置文件

import { createStore } from 'vuex'

export default createStore({
    state: {
        cou: 120
    },
    getters: {},
    mutations: {},
    actions: {},
    modules: {}
})

（2）Getter

The function of Getter is to filter data. Specifically, let's see the following code display.

//Home.view

<template>
  <div class="home">
    <p>cou={
    
    { $store.getters.guo }}</p>
  </div>
</template>

//vuex的配置文件  store下的index.js


import { createStore } from 'vuex'
export default createStore({
    state: {
        cou: 12
    },
    getters: {
        //函数名字自己取
        guo(state) {
//cou小于100无法显示
            if (state.cou > 100) {
                return cou;
            } else {
                return '数据异常，无法显示';
            }
        }
    },
    mutations: {},
    actions: {},
    modules: {}
})

 （3）Mutation

Mutation can help us change the state in the store. It is similar to an event. Each mutation has a callback function. This callback function is the place where the state change is actually performed. It will receive the state as the first parameter. See the code display for details.        

//vuex的配置文件

import { createStore } from 'vuex'

export default createStore({
    state: {
        cou: 12
    },
    getters: {
        //函数名字自己取
        guo(state) {
            if (state.cou > 100) {
                return cou;
            } else {
                return '数据异常，无法显示';
            }
        }
    },
    mutations: {
        setcou1(state, n) {
            state.cou += n;
        },
        setcou2(state, n) {
            state.cou -= n;
        }
    },
    actions: {},
    modules: {}
})

//Homeview.vue

<template>
  <div class="home">
    <p>cou={
    
    { $store.state.cou }}</p>
    <button @click="handle1">点我加10</button>
    <button @click="handle2">点我减十</button>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  methods:{
    handle1(){
      this.$store.commit("setcou1",10);
    },
    handle2(){
      this.$store.commit("setcou2",10);
    }
  }
}
</script>

（4）Action

In fact, you can understand Action and Mutation as the same, but you need to remember that Action implements asynchronous operations. For example, if you place a network request, you can only put it in Action

//配置文件
import { createStore } from 'vuex'
import axios from 'axios';
export default createStore({
    state: {
        cou: 12
    },
    getters: {
        //函数名字自己取
    },
    mutations: {
        setcou1(state, n) {
            state.cou += n;
        },
        setcou2(state, n) {
            state.cou -= n;
        }
    },
    actions: {
        yibu({ commit }) {
          //第一个参数写对应的网址即可
            axios.get("")
                .then(res => {
                    commit("setcou1", res.data[0]);
                })
        }
    },
    modules: {}
})


//Homeview.vue
<template>
  <div class="home">
    <p>cou={
    
    { $store.state.cou }}</p>
    <button @click="handle1">点我加10</button>
    <button @click="handle2">点我减十</button>
    <button @click="yibucaozuo">异步操作</button>
  </div>
</template>

<script>
// @ is an alias to /src


export default {
  name: 'HomeView',
  methods:{
    handle1(){
      this.$store.commit("setcou1",10);
    },
    handle2(){
      this.$store.commit("setcou2",10);
    },
    yibucaozuo(){
      this.$store.dispatch("yibu");
    }
  }
}
</script>