不再是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>
Logo

前往低代码交流专区

更多推荐