Vuex的学习笔记三：核心概念Action和Getter的理解和使用

野性酷女 2022-12-27 04:53 394阅读 0赞

### Vuex的主要核心概念 ###

*  一.Action
 *   *  1.1Action的自我介绍
     *  1.2组件触发Action中的异步函数
     *  1.3组件触发Action异步时携带参数
 *  二.Getter
 *   *  2.1Getter的自我介绍
     *  2.2组件访问Getter的数据

# 一.Action #

## 1.1Action的自我介绍 ##

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

**Action 提交的是 mutation**  
Action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation。

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
      state: {
        count:0, //在state中存储一个count数据
      },
      mutations: {
        add(state){
          //变更state中的count数据
          state.count++
        }
      }，
      actions:{
        asyncAdd(context){
           setTimeout(() => { //这里用定时器假设是异步操作
             context.commit('add') //这里还是触发mutations中的add方法更改count数据
           }, 1000)
        }
      }
    })

实践中，我们会经常用到 ES2015 的 参数解构来简化代码（特别是我们需要调用 commit 很多次的时候）,所以也可以写成下面代码：

actions:{
    	 asyncAdd({commit}){
    	     setTimeout(() => { 
    	        commit('add')
    	     }, 1000)
    	 }
      }

## 1.2组件触发Action中的异步函数 ##

第一种方式：通过 this.$store.dispatch 方法触发

methods:{
         addCount(){
           this.$store.dispatch('asyncAdd')
         }
      }

第二种方式：mapActions辅助函数

<template>
       <div> 
          
          <button @click = "asyncAdd"></button> 
       </div>
    </template>
    
      //从Vuex中按需导入mapActions函数
    import { mapActions} from 'vuex'
    
    <script>
    export default {
        methods: {
        //将指定的actions函数，映射为当前组件的methods函数
          ...mapActions(['asyncAdd'])
        },
    }
    </script>

## 1.3组件触发Action异步时携带参数 ##

首先要先更改一下mutations和actions中的函数，如下：

mutations: {
        add(state,num){
          //变更state中的count数据
          state.count += num
        }
    }，
    actions:{
    	 asyncAdd({commit},num){
    	     setTimeout(() => { 
    	        commit('add',num)
    	     }, 1000)
    	 }
     }

然后还是通过 this.$store.dispatch 方法触发

methods:{
         addCount(){
          var num = 5
           this.$store.dispatch('asyncAdd',num )
         }
      }

# 二.Getter #

## 2.1Getter的自我介绍 ##

Getter用于对Store中的数据进行加工处理形成新的数据；

1.  Getter可以对Store中已有的数据进行加工处理形成新的数据，类似Vue的计算属性
2.  Store中的数据发生变化，Getter的数据也会跟着发生变化
3.  Getter的返回值会根据它的依赖被缓存起来，且只有当它的依赖值发生了改变才会被重新计算。

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    const store = new Vuex.Store({
     state: {
       count:0, //在state中存储一个count数据
     },
     getters: {
       newCount:state => {
         return  ‘最新值是’+ state.count
       }
     }
    })

## 2.2组件访问Getter的数据 ##

第一种方式：通过 this.$store.getters方法触发

computed:{
         count(){
          return  this.$store.getters. newCount
         }
      }

第二种方式：mapActions辅助函数

//从Vuex中按需导入mapGetters 函数
    import { mapGetters } from 'vuex'
    
    <script>
    export default {
        computed: {
        //将 store 中的 getter 映射到组件计算属性
          ...mapGetters (['newCount'])
        },
    }
    </script>