简介
Vuex中的辅助函数可以简化我们的操作，让我们操作Vuex中的数据更加的方便。
通过下面的演示来展示Vuex辅助函数的使用
mapState函数 :
// 首先在vuex中定义数据
state: {
title : "Vuex Test页面",
num : 100,
}
// 正常使用的话 可以通过$store的直接调用Vuex中的数据
<!-- 普通使用 -->
<p> {{ "普通使用" + $store.state.title }} </p>
使用mapState辅助函数需要先在script中引入
import { mapState } from "vuex"
然后在computed中进行解构 (当前要获取的是vuex中的title属性)
computed : {
// vuex数据的辅助函数 ...mapState(["title"]),
}
最后就可以在页面中直接使用title属性获取到vuex中的数据了
<!-- 使用辅助函数 可以简化我们的许多操作 -->
<p> {{ "辅助函数使用(数组获取也可以对象获取)：" + title}} </p>
上述是通过mapState辅助函数对vuex的数据进行了简单的操作接下来我们可以通过一个小案例来通过按钮去修改vuex中的数据,调用vuex的方法
首先在vuex中声明一个number类型的属性
state : {
num : 100,
}
接着也是对应的在computed中进行数据的注册
computed : { // vuex数据的辅助函数 ...mapState(["title"，”num“]),}
然后进行属性的渲染
{{ "辅助函数使用(对象获取)：" + number }}
<!-- 通过++按钮去修改vuex中的数据 正常使用 -->
<button @click="$store.commit('addNum')"> ++ </button>
如果要通过辅助函数去调用vuex中的方法那么就需要使用到mapMutations辅助函数
在vuex中定义加减的方法
mutations : {
// 事件让num++
addNum(state){
state.num++;
},
// num--的方法
jNum(state){
state.num--;
}
}
导入mapMutations辅助函数
import { mapMutations } from "vuex"
在vue的methods中引入
methods : {
...mapMutations( [ "addNum","jNum" ] )
};
在经过上述的配置之后就可以在页面中通过事件直接调用vuex中的方法了
<!-- 也可以通过辅助函数来简化操作 -->
<button @click="jNum"> - </button>
异步辅助函数的配置和mutations的配置基本一样
在vuex中定义异步函数
actions: {
// 异步执行函数
addnum(state){
// console.log(state)
state.commit("addNum")
}
},
首先导入mapActions辅助函数
import { mapActions } from "vuex";
然后在vue的methods中进行使用
methods : {
...maoActions( [ "addnum" ] )
}
页面中的使用
<!-- 异步函数的调用 -->
<button @click="addnum">异步函数让num++</button>
最后还有getters的辅助函数
在vuex中定义getters的计算属性
getters : {
numPow(state){
return Math.pow(state.num,2)
},
numPow2(state){
return Math.pow(state.num,3)
}
},
引入getters的辅助函数
import { getters } from "vuex"
然后在vue中的computed中进行配置
computed : {
// 计算属性的辅助函数
...mapGetters(["numPow","numPow2"])
}
页面中的使用
<!-- vuex getters计算属性的基本使用 -->
num数值的平方(基础使用) ----> {{ this.$store.getters.numPow }}
num数值的立方(辅助函数) ----> {{ numPow2 }}
总结
在我们将这些辅助函数配置好之后,方便了我们的操作.也让结构更加清晰。在vuex中的数据比较多的时候我们可以使用这些辅助函数.
