目錄

• 簡介
• 說明
• 官網
• actions概述
• 說明
• 特點
• 用法
• 示例
• 測試

簡介

說明

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

官網

Action | Vuex

API 參考 | Vuex

actions概述

說明

Vuex 中的 mutation 非常類似於事件：每個 mutation 都有一個字串的 事件型別 (type) 和 一個 回撥函式 (handler)。這個回撥函式就是我們實際進行狀態更改的地方，並且它會接受 state 作為第一個引數。

特點

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

2.不能直接改變state裡的資料。

3.包含多個事件回撥函式的物件。

4.執行方式：通過執行 commit()來觸發 mutation 的呼叫,間接更新 state

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

6.可以包含非同步程式碼(例如：定時器,請求後端介面)。

用法

直接使用

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

mapActions

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

示例

CounterStore.

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--;
            },// 帶引數
            addNumber(state,param1) {
                state.count += param1;
            },},actions: {
            asyncIncrement(context) {
                console.log('CounterStore=> action: asyncIncrement');
                setTimeout(() => {context.commit('increment')},1000)
     www.cppcns.com
 
       },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></componenthttp://www.cppcns.com-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&gwww.cppcns.comt;
.outer {
  margin: 20px;
  border: 2px solid red;
  paddihttp://www.cppcns.comng: 20px;
}
</style>

ComponentA.vue（非同步修改vuex的資料）

<template>
  <div class="container">
    <h3>ComponentA</h3>
    <button @click="thisAsyncIncrement">非同步加1</button>
    <button @click="thisAsyncAddNumber">非同步增加指定的數</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的資料）

<template>
  <div class="container">
    <h3>ComponentB</h3>
    <div>計數器的值：{{thisCount}}</div>
    <div>計數器的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,}
  ],})

測試

訪問： http://localhost:8080/#/parent

到此這篇關於Vuex中actions的使用教程詳解的文章就介紹到這了,更多相關Vuex actions內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！