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

我制作了一个包含两条路线的页面，一个是主页，另一个是配置，您可以在其中决定应该将什么写入该容器，现在在配置面板中我能够获取输入值，我使用地图将它们置于我的状态现在我得到一个包含字符串值的数组。

如何使用 mapGetters 访问该数组？我链接我的代码：

<body>

<h1 v-show="elementVisible" class="info">{{ message }}</h1>

</div>

</body>

</template>

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"]他们会更好。

繁花如伊

浏览 70回答 1

1回答

阿波罗的战车

您好，欢迎来到 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>

随时随地看视频慕课网APP