Vuex入门简单示例(五)

前言

我想写一系列关于Vuex的入门文章,我是看着vuex官网文档,结合自己从零搭建的vue项目来实践vuex的知识。

Vuex入门系列:

 

 

本文涉及知识点:

  1. vuex之action
  2. vuex之mapActions

 

vuex官网描述

在mutation中混合异步调用会导致你的程序很难调试。例如当你调用了两个包含异步回调的mutation来改变状态,你怎么知道什么时候回调和哪个先回调呢?这就是为什么我们要区分这两个概念。在Vuex中,mutation都是同步事务。为了处理异步操作,让我们来看一看Action.

 

Action类似于Mutation,不同在于:

  • Action提交的是mutation,而不是直接变更状态
  • Action可以包含任意异步操作

 

让我们在store.js里来注册一个简单的action

src/store.js

复制代码
const store = new Vuex.Store({
    state: {
    // ...
    },
    getters: {
    // ...
    },
    mutations: {
    // ...
    },
    actions: {
      changeLogin (context) {
        context.commit('changeLogin')
      },
      changeUsername (context) {
        context.commit('changeUsername')
      },
      changePassword (context) {
        context.commit('changePassword')
      }
    }
})
复制代码

 

Action函数接受一个与store实例具有相同方法和属性的context对象,因此你可以调用context.commit提交一个mutation,或者通过context.state和context.getters来获取state和getters

实践中,可以用参数结构来简化代码:

复制代码
    actions: {
      changeLogin ({commit}) {
        commit('changeLogin')
      },
      changeUsername ({commit}) {
        commit('changeUsername')
      },
      changePassword ({commit}) {
        commit('changePassword')
      }
    }
复制代码

因为这三个mutation都是需要传参的,所以action也要能传入参数。

复制代码
    actions: {
      changeLogin ({commit}, data) {
        commit('changeLogin', data)
      },
      changeUsername (context, data) {
        context.commit('changeUsername', data)
      },
      changePassword (context, data) {
        context.commit('changePassword', data)
      }
    }
复制代码

回到Login.vue调用action试试

Action通过store.dispatch方法触发(调用)

src/components/Login.vue methods:

复制代码
  methods: {
    LoginHandle () {
      // 表单验证
      if (!this.username || !this.password ) return;
      
      // 修改isLogin状态
      // this.$store.commit('changeLogin', true)
      this.$store.dispatch('changeLogin', true)
      // 修改username状态
      // this.$store.commit('changeUsername', this.username)
      this.$store.dispatch('changeUsername', this.username)
      // 修改password状态
      // this.$store.commit('changePassword', this.password)
      this.$store.dispatch('changePassword', this.password)
      
      this.$router.push('/') // 跳到首页
    }
  }
复制代码

貌似和mutation差不多,为啥要多此一举呢?

这是因为mutation必须同步执行。Action就不受约束。我们可以在action内部执行异步操作

    actions: {
      // ...
      changePassword (context, data) {
        setTimeout(() => {
          context.commit('changePassword', data)
        }, 1000)
      }
    }

预览一下,没有任何毛病。

 

mapActions辅助函数

经过前面的mapState、mapGetters、mapMutations,大概也知道mapActions是怎么回事了。它们都是一个对象。

结合本例,实践一下。

store.js没变

打开Login.vue

引入mapActions

src/components/Login.vue

import { mapActions } from 'vuex'

在methods里面使用...mapActions

src/components/Login.vue

复制代码
  methods: {
    ...mapActions([
      'changeLogin',
      'changeUsername',
      'changePassword'
    ]),
    LoginHandle () {
      // 表单验证
      if (!this.username || !this.password ) return;
      
      // 修改isLogin状态
      this.changeLogin(true);
      // 修改username状态
      this.changeUsername(this.username);
      // 修改password状态
      this.changePassword(this.password);
      
      this.$router.push('/') // 跳到首页
    }
  }
复制代码

预览下,应该没问题的

 

 

 

我看了下vuex文档关于action的后面的内容,因为涉及到异步操作,都不是简单示例可以练习的。我自己试着用mockjs和axios,都写出来的话就超出主题了。越扯越远。

就这样吧,以后想到合适的方式再写。

 

参考文档:Vuex官方中文文档 

 

posted on   独自去流浪  阅读(546)  评论(0编辑  收藏  举报

编辑推荐:
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· Linux系列:如何用 C#调用 C方法造成内存泄露
阅读排行:
· 终于写完轮子一部分:tcp代理 了,记录一下
· 震惊!C++程序真的从main开始吗?99%的程序员都答错了
· 别再用vector<bool>了!Google高级工程师:这可能是STL最大的设计失误
· 单元测试从入门到精通
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

统计

点击右上角即可分享
微信分享提示