vue3.0如何使用computed來(lái)獲取vuex里數(shù)據(jù)
vue3使用computed獲取vuex里數(shù)據(jù)
不再是vue2.0里什么mapGetter,mapState那些復(fù)雜的獲取方式，
vue3.0里直接使用computed就可以調(diào)用vuex里的數(shù)據(jù)了。喜大普奔。
同時(shí)注意，一點(diǎn)，不可以直接使用useStore()方法里的state對(duì)象，因?yàn)樵谳敵鰑seStore方法的數(shù)據(jù)中，state是淺灰色的。
淺灰色只可看到，但是不可以直接使用。
如圖：
<template>
<div>{{dataList}}</div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import { useStore } from 'vuex'
// computed 計(jì)算屬性
export default defineComponent({
name: "home",
setup(props, ctx) {
let store = useStore()
// 因?yàn)閟tore里state是淺灰色的，所以不能直接使用，若要使用store.state.dataList需要computed來(lái)調(diào)用
console.log(store)
let dataList = computed(()=>{
return store.state.dataList
})
console.log(dataList)
return {
store,
dataList
}
},
});
</script>
<style scoped lang="scss">
</style>
vue3 簡(jiǎn)單使用vuex
mutations用于更變store中的數(shù)據(jù)（同步）
如何調(diào)用mutations中數(shù)據(jù)
vue3中取vuex里的數(shù)據(jù) 需要用 computed獲取
使用store.commit(“add”) 來(lái)觸發(fā)vuex里的mutations方法
觸發(fā)mutations時(shí)傳遞參數(shù)：store.commit(“addN”,2) 通過(guò)第二個(gè)參數(shù)
使用action觸發(fā)某個(gè)mutation
使用dispatch
如何使用getters
getter用于對(duì)store中的數(shù)據(jù)進(jìn)行加工處理形成的新的數(shù)據(jù)
不會(huì)修改store中的原數(shù)據(jù) 它只起到一個(gè)包裝器的作用 將store中的數(shù)據(jù)變一種形式返回出來(lái)
1.getter可以對(duì)store中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)，類似vue的計(jì)算屬性
2.store中數(shù)據(jù)發(fā)生改變 getter中的數(shù)據(jù)也會(huì)跟著變化
用計(jì)算屬性可以獲取vuex中的getters中的數(shù)據(jù)
總結(jié)
以上為個(gè)人經(jīng)驗(yàn)，希望能給大家一個(gè)參考，也希望大家多多支持腳本之家。
相關(guān)文章
如果在template里使用的是ref類型的數(shù)據(jù),?那么Vue會(huì)自動(dòng)幫我們添加.value，如果在template里使用的是reactive類型的數(shù)據(jù),?那么Vue不會(huì)自動(dòng)幫我們添加.value，這篇文章主要介紹了vue3?中ref和reactive的區(qū)別,需要的朋友可以參考下2022-12-12
Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略
代碼優(yōu)化不僅僅局限在業(yè)務(wù)邏輯這塊，像是代碼復(fù)用、效率等等都是我們可以加以改進(jìn)的地方，這篇文章主要給大家介紹了關(guān)于Vue項(xiàng)目?jī)?yōu)化的一些實(shí)戰(zhàn)策略，需要的朋友們下面隨著小編來(lái)一起學(xué)習(xí)學(xué)習(xí)吧2021-05-05
這篇文章主要介紹了vue使用gitshot生成gif問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教2024-03-03
這篇文章主要介紹了vue路由分文件拆分管理詳解，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-08-08
Vue嵌套iframe時(shí)$router.go(-1)后退bug的原因解析
這篇文章主要介紹了Vue嵌套iframe,$router.go(-1)后退bug的問(wèn)題原因及解決方法,本文給大家分享問(wèn)題原因所在及解決方案,需要的朋友可以參考下吧2023-09-09
一文詳解Vue中內(nèi)存泄漏的場(chǎng)景與預(yù)防技巧
即便是功能強(qiáng)大的?Vue.js?也無(wú)法完全避免內(nèi)存泄漏的問(wèn)題,內(nèi)存泄漏不僅會(huì)影響應(yīng)用的性能,還可能導(dǎo)致瀏覽器崩潰,下面我們來(lái)看看Vue?中常見(jiàn)的內(nèi)存泄漏場(chǎng)景以及如何避免這些問(wèn)題吧2024-12-12
解決安裝arco-design-pro-vue失敗問(wèn)題
這篇文章主要為大家介紹了解決安裝arco-design-pro-vue失敗的問(wèn)題方法詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-11-11
這篇文章主要介紹了vue中的錨點(diǎn)定位問(wèn)題，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。如有錯(cuò)誤或未考慮完全的地方，望不吝賜教2022-09-09
今天小編就為大家分享一篇vue transition 在子組件中失效的解決，具有很好的參考價(jià)值，希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2019-11-11
詳解如何使用vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截
這篇文章主要為大家詳細(xì)介紹了如何使用vue實(shí)現(xiàn)頁(yè)面訪問(wèn)攔截功能，文中的示例代碼講解詳細(xì)，具有一定的參考價(jià)值，需要的可以了解一下2023-08-08