VUEX 使用学习四 : action

vuex,使用,学习,action · 浏览次数 : 45

小编点评

**转载内容:** 1. **action 用于处理异步任务**; 2. **action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。** 3. **mutations中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store没有监听到数据的更新** 4. **通过异步操作变更数据,必须通过Action,而不能使用Mutation,在Action中还是要通过触发 Mutation的方式间接变更数据** 5. **this.$store.dispatch 是触发actions的第一 种方式** //定义store.js 中定义action actions: { addAsync(context) { setTimeout(()=> { context.commit('add') },1000) } }** 6. **从vuex中按需求导入mapState函数** import {maptActions} from 'vuex' 7. **将指定的mutations函数,映射为当前组件的methods函数** methods:{ ...maptActions(['addAsync']) } 8. **在网上找到一个demo 示例,可参考学习:**  https://gitee.com/xiangbaxiang/vue-store

正文

转载请注明出处:

  action 用于处理异步任务;action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。首先mutations中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store没有监听到数据的更新

  如果通过异步操作变更数据,必须通过Action,而不能使用Mutation,但是在Action中还是要通过触发 Mutation的方式间接变更数据。

1. this.$store.dispatch 是触发actions的第一 种方式

//定义store.js 中定义action
  actions: {
    addAsync(context) {
      setTimeout(()=> {
        context.commit('add')
      },1000)
    }
  }


//在事件方法中通过dispatch触发action
add () {
    //  触发action
    this.$store.dispatch('addAsync')
  }

  触发异步任务携带参数

 mutations: {
   add(state,step) {
    state.count += step
   }
  },
  actions: {
    addAsync(context,step) {
      setTimeout(()=> {
        context.commit('add',step)
      },1000)
    }
  }
//触发action
add () {
    this.$store.dispatch('addAsync',5)
  }

2.触发actions的第二 种方式

  1.从vuex中按需求导入mapState函数

import {maptActions} from 'vuex'

  2. 将指定的mutations函数,映射为当前组件的methods函数

methods:{ ...maptActions(['addAsync']) }

 

  在网上找到一个demo 示例,可参考学习: https://gitee.com/xiangbaxiang/vue-store

 

与VUEX 使用学习四 : action相似的内容:

VUEX 使用学习四 : action

转载请注明出处: action 用于处理异步任务;action,可以操作任意的异步操作,类似于mutations,但是是替代mutations来进行异步操作的。首先mutations中必须是同步方法,如果使用了异步,虽然页面上的内容改变了,但实际上Vuex.Store没有监听到数据的更新 如果通过异

VUEX 的使用学习一

转载请注明出处: 一、Vuex是什么? 介绍:Vuex 是一个专为 [Vue](https://so.csdn.net/so/search?q=Vue&spm=1001.2101.3001.7020).js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态

VUEX 的使用学习二: state

转载请注明出处: state 提供唯一的数据资源,所有的共享的数据都要统一放到store 中的state中进行存储; 状态state用于存储所有组件的数据。 管理数据 // 初始化vuex对象 const store = new vuex.Store({ state: { // 管理数据 count

VUEX 使用学习三 : mutations

转载请注明出处: 在 Vuex 中 store 数据改变的唯一方法就是提交 mutations。mutations里面装着一些改变数据方法的集合,这是Vuex 设计很重要的一点,就是把处理数据逻辑方法全部放在 mutations 里面,使得数据和视图分离。 通过这种方式虽然操作起来稍微繁琐一些,但是

VUEX 使用学习五 : getter

转载请注明出处: Getter对Store中的数据进行加工处理形成新的数据。他不会修改state中的原始数据,起到的是包装数据的作用; 有时我们需要从 store 中的 state 中派生出一些状态,例如对列表进行过滤并计数 如果有多个组件需要用到此属性,我们要么复制这个函数,或者抽取到一个共享函数

VUEX 使用学习六 : modules

转载请注明出处: 当Store中存放了非常多非常大的共享数据对象时,应用会变的非常的复杂,Store对象也会非常臃肿,所以Vuex提供了一个Module模块来分隔Store。通过对Vuex中的Store分隔,分隔成一个一个的Module模块,每个Module模块都拥有自己的state、mutatio

Vue3使用Vuex 教程(这才是真正的小白教程!)

我的项目是vue3+element-plus 我是个菜鸡,我不懂前端。想做一个tags的导航标签页。但是点击标签页之后页面仍然是会重新请求。感觉这不就跟没做一样吗? 遂百度GPT,第一种方式采用的就是存储到session里。搞了大半天,突然觉得这样好捞,遂采用vuex。虽然两者理论上区别不大,但是说

Vuex 4与状态管理实战指南

title: Vuex 4与状态管理实战指南 date: 2024/6/6 updated: 2024/6/6 excerpt: 这篇文章介绍了使用Vuex进行Vue应用状态管理的最佳实践,包括为何需要状态管理,Vuex的核心概念如store、actions、mutations和getters,以及

如何提高redux开发效率?当然是redux-tookit啦!

前言 使用react-redux的朋友都经历过这种痛苦吧? 定义一个store仓库,首先创建各种文件,比如reducer、action、store...,然后 将redux和react连接使用。整个流程繁琐,写起来代码冗余。 react-redux创建仓库,文件目录如下: 好怀念使用 vuex创建写

我的第一个项目(十三) :组件间传值的一些方案(vuex,eventbus,localStorage)

好家伙, 先说一下我的需求,我要组件间传值 1.eventBus 前端兄弟组件传值eventbus无法使用 不报错也不触发,就很奇怪 //eventBus.js import Vue from "vue"; export default new Vue(); //Mylogin.vue