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

最新推荐文章于 2025-01-13 12:41:28 发布

宇宙无敌饼干小怪兽

最新推荐文章于 2025-01-13 12:41:28 发布

阅读量1k

点赞数

CC 4.0 BY-SA版权

分类专栏： Vuex 文章标签： vue.js

本文链接：https://blog.csdn.net/zhuoss/article/details/120326624

Vuex 专栏收录该内容

17 篇文章

订阅专栏

这篇博客展示了如何在Vue应用中利用Vuex进行状态管理。通过`useStore`和`mapState`导入Vuex store，并使用`computed`属性绑定store中的`name`、`age`和`counter`状态到组件的模板中。博客详细解释了如何将store的状态函数转换为计算属性，以确保数据响应性。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

视图

在这里插入图片描述

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>