I have created a page with two routes - one for the home page and another for the configuration where users can decide what content should be displayed on that container. In the configuration panel, I was able to retrieve input values and stored them in my state using map actions, resulting in an array of string values.
Now, how do I access this array using mapGetters? Here is the snippet of my code:
<template>
<body>
<div class="container">
<h1 v-show="elementVisible" class="info"gt;{{ 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>
My goal is to display the message received from the configuration panel as a clean string within the {{message}} template. The message is currently stored in my state as an array of strings like ["hello", "how are you"]. How can I extract the first value ("hello") and prevent it from being displayed as ["hello"]?
(At present, the entire array is being displayed in the template)
Should I make some changes in my store.js file?
const state = {
message: [],
sec: +[]
};
const getters = {
message: state => {
return state.message;
},
sec: state => {
return state.sec;
}
};
const actions = {
setMessage: ({ commit, state }, inputs) => {
commit(
"SET_MESSAGE",
inputs.map(input => input.message)
);
return state.message;
},
setSec: ({ commit, state }, inputs) => {
commit("SET_TIMEOUT", inputs.map(x => x.sec).map(Number));
console.log(inputs.map(x => x.sec).map(Number));
return state.sec;
}
};
const mutations = {
SET_MESSAGE: (state, newValue) => {
state.message = newValue;
},
SET_TIMEOUT: (state, newSecVal) => {
state.sec = newSecVal;
}
};
export default {
state,
getters,
actions,
mutations
};
The homepage should display the message and handle the timeout functionality based on the sec value provided. It should continue displaying subsequent values from the array after each timeout duration.
Thank you!