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

methods:{

addCount(){

this.$store.dispatch(‘asyncAdd’)

}

}

第二种方式：mapActions辅助函数

<button @click = “asyncAdd”>

//从Vuex中按需导入mapActions函数

import { mapActions} from ‘vuex’

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 函数

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心

omputed:{

count(){

return this.$store.getters. newCount

}

}

第二种方式：mapActions辅助函数

//从Vuex中按需导入mapGetters 函数

学习分享，共勉

题外话，毕竟我工作多年，深知技术改革和创新的方向，Flutter作为跨平台开发技术、Flutter以其美观、快速、高效、开放等优势迅速俘获人心