vue3.0如何使用computed來獲取vuex裡數據

Posted on by

vue3使用computed獲取vuex裡數據

不再是vue2.0裡什麼mapGetter,mapState那些復雜的獲取方式，

vue3.0裡直接使用computed就可以調用vuex裡的數據瞭。喜大普奔。

同時註意，一點，不可以直接使用useStore()方法裡的state對象，因為在輸出useStore方法的數據中，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來調用
    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中的數據（同步）

如何調用mutations中數據

vue3中取vuex裡的數據 需要用 computed獲取

使用store.commit(“add”) 來觸發vuex裡的mutations方法

觸發mutations時傳遞參數：store.commit(“addN”,2) 通過第二個參數

使用action觸發某個mutation

使用dispatch

如何使用getters

getter用於對store中的數據進行加工處理形成的新的數據

不會修改store中的原數據 它隻起到一個包裝器的作用 將store中的數據變一種形式返回出來

1.getter可以對store中已有的數據加工處理之後形成新的數據，類似vue的計算屬性

2.store中數據發生改變 getter中的數據也會跟著變化

用計算屬性可以獲取vuex中的getters中的數據

總結

以上為個人經驗，希望能給大傢一個參考，也希望大傢多多支持WalkonNet。

推薦閱讀：