Vuex的主要核心概念
一.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>
<!-- 这里点击事件可以直接写成actions函数事件名 -->
<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中的数据进行加工处理形成新的数据;
- Getter可以对Store中已有的数据进行加工处理形成新的数据,类似Vue的计算属性
- Store中的数据发生变化,Getter的数据也会跟着发生变化
- 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>