其他分享
首页 > 其他分享> > setup中如何使用mapState 批量导入Vuex中的数据

setup中如何使用mapState 批量导入Vuex中的数据

作者:互联网

视图

在这里插入图片描述

Home.vue

<template>
  <div class="home">
    <table border="1">
      <h5>{{ name }}</h5>
      <h5>{{ age }}</h5>
      <h5>{{ counter }}</h5>
    </table>
  </div>
</template>

<script>
import { useStore, mapState } from "vuex";
import { computed } from "vue";
export default {
  setup() {
    const store = useStore();
    const storeStateFns = mapState(["name", "age", "counter"]);
    // console.log(storeStateFns);//=>{name: ƒ, age: ƒ, counter: ƒ}
    const storeState = {};

    Object.keys(storeStateFns).forEach((fnKey) => {

      const fn = storeStateFns[fnKey].bind({ $store: store });
      storeState[fnKey] = computed(fn);
      
    });

    return {
      ...storeState,
    };
  },
};
</script>

<style></style>

标签:const,storeState,setup,mapState,fnKey,storeStateFns,Vuex,store
来源: https://blog.csdn.net/zhuoss/article/details/120326624