为了账号安全,请及时绑定邮箱和手机立即绑定

如何在另一个路由器页面 VUEJS、VUEX 中访问我的数组状态

如何在另一个路由器页面 VUEJS、VUEX 中访问我的数组状态

繁花如伊 2022-10-27 16:52:17
我制作了一个包含两条路线的页面,一个是主页,另一个是配置,您可以在其中决定应该将什么写入该容器,现在在配置面板中我能够获取输入值,我使用地图将它们置于我的状态现在我得到一个包含字符串值的数组。如何使用 mapGetters 访问该数组?我链接我的代码:<template>  <body>    <div class="container">      <h1 v-show="elementVisible" class="info">{{ message }}</h1>    </div>  </body></template><script>  import moment from "moment";  import { mapGetters } from "vuex";  export default {    name: "Home",    data() {      return {        // message: this.store.state.message        elementVisible: true      };    },    computed: {      ...mapGetters(["message", "sec"]),      ...mapGetters({        message: "message",        sec: "sec"      }),      createdDate() {        return moment().format("DD-MM-YYYY ");      },      createdHours() {        return moment().format("HH:mm ");      }    },    mounted() {      this.$store.dispatch("SET_MESSAGE");      this.$store.dispatch("SET_SEC");      setTimeout(() => (this.elementVisible = false), this.sec);    }  };</script>所以我要做的就是将我从配置面板收到的消息放入该{{message}}模板中,并且它现在处于我的状态,作为字符串数组坐在那里,例如,[“hello”, “你好吗”] 他们就是这样坐在那里的,所以我怎么能抓住第一个('hello')并将其写成一个干净的字符串而不是 ["hello"]他们会更好。
查看完整描述

1 回答

?
阿波罗的战车

TA贡献1862条经验 获得超6个赞

您好,欢迎来到 Stack Overflow!您的messageArray 使用 正确映射mapGetters,但是当您使用 将其放入模板中时,您将其展平为字符串{{message}},因为模板插值逻辑将对象转换为字符串,与Array.toString本例中的调用相同。你需要迭代它,即使用v-for指令:


<template>

  <body>

    <div class="container">

      <h1 v-show="elementVisible" class="info">

        <span v-for="m of message" :key="m">{{m}}</span>

      </h1>

    </div>

  </body>

</template>

当然,如果你只需要第一项,你可以直接使用:


<template>

  <body>

    <div class="container">

      <h1 v-show="elementVisible" class="info">{{message[0] || 'No message'}}</h1>

    </div>

  </body>

</template>


查看完整回答
反对 回复 2022-10-27
  • 1 回答
  • 0 关注
  • 69 浏览
慕课专栏
更多

添加回答

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信