vue3.0如何使用computed來獲取vuex里數(shù)據(jù)
vue3使用computed獲取vuex里數(shù)據(jù)
不再是vue2.0里什么mapGetter,mapState那些復雜的獲取方式，
vue3.0里直接使用computed就可以調(diào)用vuex里的數(shù)據(jù)了。喜大普奔。
同時注意，一點，不可以直接使用useStore()方法里的state對象，因為在輸出useStore方法的數(shù)據(jù)中，state是淺灰色的。
淺灰色只可看到，但是不可以直接使用。
如圖：
<template>
<div>{{dataList}}</div>
</template>
<script>
import { defineComponent, ref, reactive, toRefs, computed } from "vue";
import { useStore } from 'vuex'
// computed 計算屬性
export default defineComponent({
name: "home",
setup(props, ctx) {
let store = useStore()
// 因為store里state是淺灰色的，所以不能直接使用，若要使用store.state.dataList需要computed來調(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 簡單使用vuex
mutations用于更變store中的數(shù)據(jù)（同步）
如何調(diào)用mutations中數(shù)據(jù)
vue3中取vuex里的數(shù)據(jù) 需要用 computed獲取
使用store.commit(“add”) 來觸發(fā)vuex里的mutations方法
觸發(fā)mutations時傳遞參數(shù)：store.commit(“addN”,2) 通過第二個參數(shù)
使用action觸發(fā)某個mutation
使用dispatch
如何使用getters
getter用于對store中的數(shù)據(jù)進行加工處理形成的新的數(shù)據(jù)
不會修改store中的原數(shù)據(jù) 它只起到一個包裝器的作用 將store中的數(shù)據(jù)變一種形式返回出來
1.getter可以對store中已有的數(shù)據(jù)加工處理之后形成新的數(shù)據(jù)，類似vue的計算屬性
2.store中數(shù)據(jù)發(fā)生改變 getter中的數(shù)據(jù)也會跟著變化
用計算屬性可以獲取vuex中的getters中的數(shù)據(jù)
總結(jié)
以上為個人經(jīng)驗，希望能給大家一個參考，也希望大家多多支持腳本之家。
相關文章
本篇文章主要介紹了vue之數(shù)據(jù)交互實例代碼，vue中也存在像ajax和jsonp的數(shù)據(jù)交互，實現(xiàn)向服務器獲取數(shù)據(jù)，有興趣的可以了解一下2017-06-06
這篇文章主要介紹了 vue3 自定義指令詳情，自定義指令分為全局和局部兩種類型，大家并不陌生。今天我們就講講在 vue3 中，自定義指令定義、使用以及鉤子函數(shù)都有哪些變化？,需要的朋友可以參考一下2021-11-11
前端經(jīng)常會用到UI提供的各種圖表,推薦阿里的圖標庫,下面這篇文章主要給大家介紹了關于element使用自定義icon圖標的詳細步驟,文中通過實例代碼介紹的非常詳細,需要的朋友可以參考下2022-11-11
這篇文章主要為大家詳細介紹了Vue移動端實現(xiàn)圖片上傳及超過1M壓縮上傳，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2019-12-12
watch的基本用法是在Vue實例中定義一個watch對象,該對象內(nèi)部包含需要監(jiān)聽的數(shù)據(jù)項和對應的回調(diào)函數(shù)，這篇文章主要介紹了vue2中watch的使用,需要的朋友可以參考下2024-01-01
Vant Uploader實現(xiàn)上傳一張或多張圖片組件
這篇文章主要為大家詳細介紹了Vant Uploader實現(xiàn)上傳一張或多張圖片組件，文中示例代碼介紹的非常詳細，具有一定的參考價值，感興趣的小伙伴們可以參考一下2021-09-09
本文主要介紹了element表格變化后自動刷新的兩種方案，文中通過示例代碼介紹的非常詳細，對大家的學習或者工作具有一定的參考學習價值，需要的朋友們下面隨著小編來一起學習學習吧2023-04-04
Vue3?封裝擴展并簡化Vuex在組件中的調(diào)用問題
這篇文章主要介紹了Vue3?封裝擴展并簡化Vuex在組件中的調(diào)用,本文給大家介紹的非常詳細，對大家的學習或工作具有一定的參考借鑒價值，需要的朋友可以參考下2023-01-01
Nuxt.js是創(chuàng)建Universal Vue.js應用程序的框架。它的主要范圍是UI渲染，同時抽象出客戶端/服務器分布。我們的目標是創(chuàng)建一個足夠靈活的框架，以便您可以將其用作主項目庫或基于Node.js的當前項目。2020-03-03
使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（二）
這篇文章主要介紹了使用vue.js2.0 + ElementUI開發(fā)后臺管理系統(tǒng)詳細教程（二），非常不錯，具有參考借鑒價值，需要的朋友參考下吧2017-01-01