视图

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>