您好,登錄后才能下訂單哦!
這篇文章主要介紹“vue3在setup中怎么使用mapState”,在日常操作中,相信很多人在vue3在setup中怎么使用mapState問題上存在疑惑,小編查閱了各式資料,整理出簡(jiǎn)單好用的操作方法,希望對(duì)大家解答”vue3在setup中怎么使用mapState”的疑惑有所幫助!接下來,請(qǐng)跟著小編一起來學(xué)習(xí)吧!
hooks/useMapState.ts
import { computed } from "vue" import { mapState, useStore } from "vuex" export default function (state:any) { // 1. 獲取實(shí)例 $store const store = useStore() // 2. 遍歷狀態(tài)數(shù)據(jù) const storeStateFns = mapState(state) // 3. 存放處理好的數(shù)據(jù)對(duì)象 const storeState = {} // 4. 對(duì)每個(gè)函數(shù)進(jìn)行computed Object.keys(storeStateFns).forEach(fnKey => { const fn = storeStateFns[fnKey].bind({ $store: store }) // 遍歷生成這種數(shù)據(jù)結(jié)構(gòu) => {name: ref(), age: ref()} storeState[fnKey] = computed(fn) }) return storeState }
使用
<script lang="ts" setup> import useMapState from "@/hooks/useMapState" const myState:any = useMapState({ includeList: (state: any) => state.keepAlive.includeList }) const { includeList } = myState </script>
在Vue的組件中,要想使用Vuex中的多個(gè)State,我們經(jīng)過會(huì)借助mapState輔助函數(shù)進(jìn)行獲取值,但是在Vue3中,通過computed的來獲取多個(gè)值的方法官方并未提供,話不多說,直接上代碼。
useMapState.js
import { computed } from "vue"; import { mapState, useStore } from "vuex" export const useMapState = (getKeys) => { const store = useStore(); const storeState = {} const storeFns = mapState(getKeys) Object.keys(storeFns).forEach((fnKeys) => { const fn = storeFns[fnKeys].bind({$store: store}) storeState[fnKeys] = computed(fn) }) return storeState }
<script> import { useMapState } from ''./Hooks/useMapState.js' export default { setup() { const storeState = useMapState(['title', 'counter']) return { ...storeState } } } </script>
在setup語法糖中由于不能使用 return進(jìn)行返回,所以只能按照如下方式寫了
<script setup> import { useMapState } from ''./Hooks/useMapState.js' const { title, counter } = useMapState(['title', 'counter']) </script>
到此,關(guān)于“vue3在setup中怎么使用mapState”的學(xué)習(xí)就結(jié)束了,希望能夠解決大家的疑惑。理論與實(shí)踐的搭配能更好的幫助大家學(xué)習(xí),快去試試吧!若想繼續(xù)學(xué)習(xí)更多相關(guān)知識(shí),請(qǐng)繼續(xù)關(guān)注億速云網(wǎng)站,小編會(huì)繼續(xù)努力為大家?guī)砀鄬?shí)用的文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如果涉及侵權(quán)請(qǐng)聯(lián)系站長郵箱:is@yisu.com進(jìn)行舉報(bào),并提供相關(guān)證據(jù),一經(jīng)查實(shí),將立刻刪除涉嫌侵權(quán)內(nèi)容。