I am facing an issue where I am trying to push an input value and store it in an array in the local storage using VUEX. I have created an array in the state for this purpose. Initially, I push the value and then I stringify it to set the value to the store in local storage. However, when I try to retrieve it from my array by parsing the JSON, it is not functioning as expected. I am unsure where my value is being directed to. Additionally, the console displays an error stating 'push is not a function'.
state:{
formItems:JSON.parse(localStorage.getItem('formItems'))||[]
},
mutations:{
formFunction(state, myInput){
state.formItems.push({myInput});
localStorage.setItem('formItems', JSON.stringify(state.formItems))
},
<template>
<div>
<div class="container">
<div class="row">
<div class="col s12">
<input type="text" v-model="Input">
<br>
<button class="btn waves-effect" @click="saveInput">Save</button>
</div>
</div>
<p>{{text}}</p>
</div>
</div>
</template>
<script>
export default {
name:"test",
data:function(){
return{
Input:"",
}
},
methods:{
saveInput(){
this.$store.commit('formFunction', this.Input);
this.Input="";
}
},
computed:{
text(){
return this.$store.state.formItems;
},
</script>