簡介
? ? ? ? Vuex中的輔助函數(shù)可以簡化我們的操作，讓我們操作Vuex中的數(shù)據(jù)更加的方便。
通過下面的演示來展示Vuex輔助函數(shù)的使用
mapState函數(shù) :
?// 首先在vuex中定義數(shù)據(jù)
state: {
????title : "Vuex Test頁面",
????num : 100,
}
// 正常使用的話 可以通過$store的直接調(diào)用Vuex中的數(shù)據(jù)
<!-- 普通使用 -->
<p> {{ "普通使用" + $store.state.title }} </p>
使用mapState輔助函數(shù)需要先在script中引入
import { mapState } from "vuex"
然后在computed中進(jìn)行解構(gòu) (當(dāng)前要獲取的是vuex中的title屬性)
computed : {
? ? // vuex數(shù)據(jù)的輔助函數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ...mapState(["title"]),
}
最后就可以在頁面中直接使用title屬性獲取到vuex中的數(shù)據(jù)了
<!-- 使用輔助函數(shù) 可以簡化我們的許多操作 -->
<p> {{ "輔助函數(shù)使用(數(shù)組獲取也可以對(duì)象獲取)：" + title}} </p>
上述是通過mapState輔助函數(shù)對(duì)vuex的數(shù)據(jù)進(jìn)行了簡單的操作接下來我們可以通過一個(gè)小案例來通過按鈕去修改vuex中的數(shù)據(jù),調(diào)用vuex的方法
首先在vuex中聲明一個(gè)number類型的屬性
state : {
????num : 100,
}
接著也是對(duì)應(yīng)的在computed中進(jìn)行數(shù)據(jù)的注冊(cè)
computed : {? ? // vuex數(shù)據(jù)的輔助函數(shù)? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ? ...mapState(["title"，”num“]),}
然后進(jìn)行屬性的渲染
{{ "輔助函數(shù)使用(對(duì)象獲取)：" + number }}
<!-- 通過++按鈕去修改vuex中的數(shù)據(jù) 正常使用 -->
<button @click="$store.commit('addNum')"> ++ </button>
如果要通過輔助函數(shù)去調(diào)用vuex中的方法那么就需要使用到mapMutations輔助函數(shù)
在vuex中定義加減的方法
mutations : {
// 事件讓num++
????addNum(state){
????????state.num++;
????},
// num--的方法
????jNum(state){
????????state.num--;
????}
}
導(dǎo)入mapMutations輔助函數(shù)
import { mapMutations } from "vuex"
在vue的methods中引入
methods : {
? ? ...mapMutations( [ "addNum","jNum" ] )
};
在經(jīng)過上述的配置之后就可以在頁面中通過事件直接調(diào)用vuex中的方法了
<!-- 也可以通過輔助函數(shù)來簡化操作 -->
<button @click="jNum"> - </button>
異步輔助函數(shù)的配置和mutations的配置基本一樣
在vuex中定義異步函數(shù)
actions: {
????// 異步執(zhí)行函數(shù)????
????addnum(state){
????????// console.log(state)
????????state.commit("addNum")
????}
},
首先導(dǎo)入mapActions輔助函數(shù)
import { mapActions } from "vuex";
然后在vue的methods中進(jìn)行使用
methods : {
? ? ...maoActions( [ "addnum" ] )
}
頁面中的使用
<!-- 異步函數(shù)的調(diào)用 -->
<button @click="addnum">異步函數(shù)讓num++</button>
最后還有g(shù)etters的輔助函數(shù)
在vuex中定義getters的計(jì)算屬性
????getters : {
????????numPow(state){
????????????return Math.pow(state.num,2)
????},
????numPow2(state){
???????return Math.pow(state.num,3)
????}
},
引入getters的輔助函數(shù)
import { getters } from "vuex"
然后在vue中的computed中進(jìn)行配置
computed : {
????// 計(jì)算屬性的輔助函數(shù)
?????...mapGetters(["numPow","numPow2"])
}
頁面中的使用
<!-- vuex getters計(jì)算屬性的基本使用 -->?
num數(shù)值的平方(基礎(chǔ)使用) ----> {{ this.$store.getters.numPow }}
num數(shù)值的立方(輔助函數(shù)) ----> {{ numPow2 }}
總結(jié)
????????在我們將這些輔助函數(shù)配置好之后,方便了我們的操作.也讓結(jié)構(gòu)更加清晰。在vuex中的數(shù)據(jù)比較多的時(shí)候我們可以使用這些輔助函數(shù).? ? ? ??
