Vuex中actions的使用教程詳解

更新時(shí)間：2022年01月28日 09:29:52 作者：IT利刃出鞘

actions作為Vuex的五大核心之一，它的屬性是用來處理異步方法的，通過提交mutations實(shí)現(xiàn)。本文將具體介紹一下actions的使用教程，需要的可以參考一下

簡(jiǎn)介

說明

本文用示例介紹Vuex的五大核心之一：actions。

官網(wǎng)

Action | Vuex

API 參考 | Vuex

actions概述

說明

Vuex 中的 mutation 非常類似于事件：每個(gè) mutation 都有一個(gè)字符串的事件類型 (type) 和一個(gè) 回調(diào)函數(shù) (handler)。這個(gè)回調(diào)函數(shù)就是我們實(shí)際進(jìn)行狀態(tài)更改的地方，并且它會(huì)接受 state 作為第一個(gè)參數(shù)。

特點(diǎn)

1.異步操作，通過mutations來改變state。

2.不能直接改變state里的數(shù)據(jù)。

3.包含多個(gè)事件回調(diào)函數(shù)的對(duì)象。

4.執(zhí)行方式：通過執(zhí)行 commit()來觸發(fā) mutation 的調(diào)用, 間接更新 state

5.觸發(fā)方式: 組件中: $store.dispatch(‘action 名稱’, data1)

6.可以包含異步代碼(例如：定時(shí)器, 請(qǐng)求后端接口)。

用法

直接使用

this.$store.dispatch('actions方法名', 具體值)        // 不分模塊
this.$store.dispatch('模塊名/actions方法名', 具體值) // 分模塊

mapActions

import { mapActions } from 'vuex'
export default {
    computed: {
        // 不分模塊
        ...mapActions(['actions方法名'])          
 
        // 分模塊，不改方法名
        ...mapActions('模塊名', ['actions方法名'])
        
        // 分模塊，不改方法名
        ...mapActions('模塊名',{'新actions方法名': '舊actions方法名'})
    }
}

示例

CounterStore.js

import Vue from 'vue';
import Vuex from 'vuex';
 
Vue.use(Vuex);
const counterStore = new Vuex.Store(
    {
        state: {
            count: 10
        },
 
        getters: {
            doubleCount(state) {
                return state.count * 2;
            }
        },
 
        mutations: {
            increment(state) {
                state.count++;
            },
            decrement(state) {
                state.count--;
            },
            // 帶參數(shù)
            addNumber(state, param1) {
                state.count += param1;
            },
        },
 
        actions: {
            asyncIncrement(context) {
                console.log('CounterStore=> action: asyncIncrement');
                setTimeout(() => {context.commit('increment')}, 1000)
            },
 
            asyncAddNumber(context, n) {
                console.log('CounterStore=> action: asyncAddNumber');
                setTimeout(() => {context.commit('addNumber', n)}, 1000)
            }
        }
    }
);
 
export default counterStore;

Parent.vue（入口組件）

<template>
  <div class="outer">
    <h3>父組件</h3>
    <component-a></component-a>
    <component-b></component-b>
  </div>
</template>
 
<script>
import ComponentA from "./ComponentA";
import ComponentB from "./ComponentB";
 
export default {
  name: 'Parent',
  components: {ComponentA, ComponentB},
}
</script>
 
<style scoped>
.outer {
  margin: 20px;
  border: 2px solid red;
  padding: 20px;
}
</style>

ComponentA.vue（異步修改vuex的數(shù)據(jù)）

<template>
  <div class="container">
    <h3>ComponentA</h3>
    <button @click="thisAsyncIncrement">異步加1</button>
    <button @click="thisAsyncAddNumber">異步增加指定的數(shù)</button>
  </div>
</template>
 
<script>
export default {
  data() {
    return {
      cnt: 5
    }
  },
  methods:{
    thisAsyncIncrement() {
      this.$store.dispatch('asyncIncrement')
    },
    thisAsyncAddNumber() {
      this.$store.dispatch('asyncAddNumber', this.cnt)
    }
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

ComponentB.vue（讀取vuex的數(shù)據(jù)）

<template>
  <div class="container">
    <h3>ComponentB</h3>
    <div>計(jì)數(shù)器的值：{{thisCount}}</div>
    <div>計(jì)數(shù)器的2倍：{{thisDoubleCount}}</div>
  </div>
</template>
 
<script>
export default {
  computed:{
    thisCount() {
      return this.$store.state.count;
    },
    thisDoubleCount() {
      return this.$store.getters.doubleCount;
    },
  }
}
</script>
 
<style scoped>
.container {
  margin: 20px;
  border: 2px solid blue;
  padding: 20px;
}
</style>

路由（router/index.js）

import Vue from 'vue'
import Router from 'vue-router'
import Parent from "../components/Parent";
 
Vue.use(Router)
 
export default new Router({
  routes: [
    {
      path: '/parent',
      name: 'Parent',
      component: Parent,
    }
  ],
})