5-4.vuex的actions

1.actions的作用

当我们修改共享变量的数据时有异步操作(如等待多少秒，调用后端的接口等)，我们不该直接在mutations里面直接进行，需要在actions里面实现异步操作，再在mutations里面修改数据。

2.基本使用

1.代码展示

vuex的index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 10
  },
  getters: {
  },
  mutations: {
    updateCount1(state) {
      return state.count++;
    },
    updateCount2(state, payload) {
      return state.count += payload;
    },
  },
  actions: {
    aUpdateCount1(context) {
      setTimeout(() => {
        context.commit('updateCount1');
      }, 1000);
    },
    aUpdateCount2(context, payload) {
      setTimeout(() => {
        context.commit('updateCount2', payload);
      }, 1000);
    },
  },
  modules: {
  }
})

Home.vue

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>展示count数据：{{$store.state.count}}</p>
    <button @click='test1'>延迟展示</button>
    <button @click='test2(10)'>带参数的延迟展示</button>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    methods: {
      test1() {
        this.$store.dispatch('aUpdateCount1');
      },
      test2(num) {
        this.$store.dispatch('aUpdateCount2', num);
      }
    }
  }
</script>

2.过程分解

3.带返回值的处理方式

1.代码展示

vuex的index.js

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 10
  },
  getters: {
  },
  mutations: {
    updateCount1(state) {
      return state.count++;
    }
  },
  actions: {
    aUpdateCount1(context) {
      return new Promise( (resolve) => {
        setTimeout(() => {
          context.commit('updateCount1');
        }, 1000);
        resolve('成功了');
      });
    }
  },
  modules: {
  }
})

Home.vue

<template>
  <div class="home">
    <h1>这是home页面</h1>
    <p>展示count数据：{{$store.state.count}}</p>
    <button @click='test1'>延迟展示</button>
  </div>
</template>

<script>
  export default {
    name: 'Home',
    methods: {
      test1() {
        this.$store.dispatch('aUpdateCount1').then ( (data) => {
          alert(data);
        });
      }
    }
  }
</script>

2.过程分解

3.多个异步操作组合实现

1.代码展示

import { createStore } from 'vuex'

export default createStore({
  state: {
    count: 10
  },
  getters: {
  },
  mutations: {
    updateCount1(state) {
      return state.count++;
    },
    updateCount2(state) {
      return state.count*state.count;
    }
  },
  actions: {
    async aUpdateCount1(context) {
      await context.dispatch('aUpdateCount2');
      setTimeout(() => {
        context.commit('updateCount1');
      }, 1000);
    },
    async aUpdateCount2(context) {
      setTimeout(() => {
        context.commit('updateCount2');
      }, 1000);
    },
  },
  modules: {
  }
})

2.过程分解