Vuex中actions的使用教程详解

 更新时间:2022年01月28日 09:29:52   作者:IT利刃出鞘  
actions作为Vuex的五大核心之一,它的属性是用来处理异步方法的,通过提交mutations实现。本文将具体介绍一下actions的使用教程,需要的可以参考一下

简介

说明

本文用示例介绍Vuex的五大核心之一: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'
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--;
            },
            // 带参数
            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的数据) 

<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内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家!

相关文章

  • Vue github用户搜索案例分享

    Vue github用户搜索案例分享

    这篇文章主要介绍了Vue github用户搜索案例分享,文章基于Vue的相关资料展开对主题的详细介绍,具有一定的参考价值,需要的小伙伴可以参考一下
    2022-04-04
  • vue内置组件Transition的示例详解

    vue内置组件Transition的示例详解

    这篇文章主要介绍了vue内置组件Transition的详解,简单地说,就是当元素发生变化,比如消失、显示时,添加动画让它更自然过渡,它是vue内置组件,不需要引入注册就可以直接使用,本文通过实例代码介绍的非常详细,需要的朋友可以参考下
    2023-09-09
  • Vue3搭建组件库开发环境的示例详解

    Vue3搭建组件库开发环境的示例详解

    这篇文章给大家分享Vue3搭建组件库开发环境,给大家讲解依次搭建组件库、example、文档、cli,本文内容是搭建组件库的开发环境的过程,感兴趣的朋友跟随小编一起看看吧
    2022-11-11
  • vue 导入js中的两种方法(示例详解)

    vue 导入js中的两种方法(示例详解)

    这篇文章主要介绍了vue 导入js中的方法,本文通过两种方法结合示例代码给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2023-07-07
  • vue储存storage时含有布尔值的解决方案

    vue储存storage时含有布尔值的解决方案

    这篇文章主要介绍了vue储存storage时含有布尔值的解决方案,具有很好的参考价值,希望对大家有所帮助。如有错误或未考虑完全的地方,望不吝赐教
    2021-06-06
  • vue3如何加载本地图片等静态资源浅析

    vue3如何加载本地图片等静态资源浅析

    在最近新起的项目中,用到了较新的技术栈vue3.2+vite+ts,跟着网上的写法渐渐上手了,下面这篇文章主要给大家介绍了关于vue3如何加载本地图片等静态资源的相关资料,需要的朋友可以参考下
    2023-04-04
  • 详解Vue 路由组件传参的 8 种方式

    详解Vue 路由组件传参的 8 种方式

    这篇文章主要介绍了Vue 路由组件传参的 8 种方式,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友可以参考下
    2021-03-03
  • 关于vue的npm run dev和npm run build的区别介绍

    关于vue的npm run dev和npm run build的区别介绍

    这篇文章主要介绍了关于vue的npm run dev和npm run build的区别介绍,小编觉得挺不错的,现在分享给大家,也给大家做个参考。一起跟随小编过来看看吧
    2019-01-01
  • Vue项目中使用fontawesome图标库的方法

    Vue项目中使用fontawesome图标库的方法

    fontawesome的图标有免费版和专业版,本文主要使用free版本,一般free版本的图标够用,free图标又划分为三个图标库,主要有实心图标solid、常规图标regular及品牌图标brand,根据需求去下载对应的图标库,无须全部下载,对vue fontawesome图标库相关知识感兴趣的朋友一起看看吧
    2023-12-12
  • 解决vue-router路由拦截造成死循环问题

    解决vue-router路由拦截造成死循环问题

    这篇文章主要介绍了解决vue-router路由拦截造成死循环问题,具有很好的参考价值,希望对大家有所帮助。一起跟随小编过来看看吧
    2020-08-08

最新评论