9.vuex状态管理核心

1、最常用的核心包含：State、Getter、Mutation、Action

state在上一章已经讲述过了，下面继续来理解后面的几个核心

2、Getter

作用：对vuex中的数据进行过滤或者逻辑处理

import { createStore } from 'vuex'
export default createStore({
  // 所有的数据都放在这里
  state: {
    counter: 0,
  },
  // 数据过滤
  getters: {
    getCounter(state) {
      return state.counter > 0 ? state.counter : "counter数据异常"
    }
  },
  mutations: {
  },
  actions: {
  },
  modules: {
  }
})

页面便可进行访问getCounter了

<template>
    <h3>关于详情</h3>
    <p>读取counter方式1:{{ $store.state.counter }}</p>
    <p>读取counter方式2:{{ counter }}</p>
    <p>读取getCounter方式1:{{ $store.getters.getCounter }}</p>
    <p>读取getCounter方式2:{{ getCounter }}</p>
</template>
<script>
// mapState是vuex所提供的快捷读取方式
import { mapState, mapGetters } from 'vuex'
export default {
    name: "AboutInfoView",
    // 在computed里存放vuex的数据
    computed: {
        ...mapState(["counter"]),
        ...mapGetters(["getCounter"])
    }
}
</script>

3、Mutation

更改store中的状态的唯一方法是提交Mutation进行数据统一修改。

import { createStore } from 'vuex'
export default createStore({
  // 所有的数据都放在这里
  state: {
    counter: 0,
  },
  // 数据过滤
  getters: {
    getCounter(state) {
      return state.counter > 0 ? state.counter : "counter数据异常"
    }
  },
  // 数据修改
  mutations: {
    addCounter(state, num) {
      state.counter += num;
    }
  },
  actions: {
  },
  modules: {
  }
})

<template>
    <h3>关于详情</h3>
    <p>读取counter方式1:{{ $store.state.counter }}</p>
    <p>读取counter方式2:{{ counter }}</p>
    <p>读取getCounter方式1:{{ $store.getters.getCounter }}</p>
    <p>读取getCounter方式2:{{ getCounter }}</p>
    <button @click="addClick">修改counter</button>
</template>
<script>
// mapState是vuex所提供的快捷读取方式
import { mapState, mapGetters, mapMutations } from 'vuex'
export default {
    name: "AboutInfoView",
    methods: {
        ...mapMutations(["addCounter"]),
        addClick() {
            // mutations固定的调用方式1
            this.$store.commit("addCounter", 10);
            // mutations调用方式2
            this.addCounter(10);
        }
    },
    // 在computed里存放vuex的数据
    computed: {
        ...mapState(["counter"]),
        ...mapGetters(["getCounter"]),
    }
}
</script>

4、Action

Action类似于Mutation，不同在于：

1. Action提交的是mutation，而不是直接变更状态，
2. Action可以包含任意的异步操作，所以一般只有异步操作才用Action

安装一下axion进行异步测试：npm install —save axios
修改index.js:

import axios from 'axios';
import { createStore } from 'vuex'
export default createStore({
  // 所有的数据都放在这里
  state: {
    counter: 0,
  },
  // 数据过滤
  getters: {
    getCounter(state) {
      return state.counter > 0 ? state.counter : "counter数据异常"
    }
  },
  // 数据修改
  mutations: {
    addCounter(state, num) {
      state.counter += num;
    }
  },
  // 为异步数据修改操作所准备的
  actions: {
    asyncAddCounter({ commit }) {
      axios.get("http://iwenwiki.com/api/generator/list.php")
        .then(res => {
          commit("addCounter", res.data[0]);
        })
    }
  },
  modules: {
  }
})

修改AboutInfoView.vue页面:

<template>
    <h3>关于详情</h3>
    <p>读取counter方式1:{{ $store.state.counter }}</p>
    <p>读取counter方式2:{{ counter }}</p>
    <p>读取getCounter方式1:{{ $store.getters.getCounter }}</p>
    <p>读取getCounter方式2:{{ getCounter }}</p>
    <button @click="addClick">修改counter</button>
    <button @click="asyncAddClick">异步修改counter</button>
</template>
<script>
// mapState是vuex所提供的快捷读取方式
import { mapState, mapGetters, mapMutations, mapActions } from 'vuex'
export default {
    name: "AboutInfoView",
    methods: {
        ...mapMutations(["addCounter"]),
        ...mapActions(["asyncAddCounter"]),
        addClick() {
            // mutations固定的调用方式1
            this.$store.commit("addCounter", 10);
            // mutations调用方式2
            this.addCounter(10);
        },
        asyncAddClick() {
            // actions固定的调用方式1
            this.$store.dispatch("asyncAddCounter");
            // mutations调用方式2
            this.asyncAddCounter();
        }
    },
    // 在computed里存放vuex的数据
    computed: {
        ...mapState(["counter"]),
        ...mapGetters(["getCounter"]),
    }
}
</script>

5、查看效果