How to edit my store so it can take all of my inputs in array to my state?

Question

I am having a form where you can add more lines also delete them and at the end. I am having a submit button which should put all of my input values what user gave to the form, to my state, with the help of my mapActions.

This is my code:

<template>
  <div id="app">
  

    <v-form ref="form" class="container" v-for="(input, i) in inputs" :key="i" lazy-validation>
      <v-container class="container">
        <v-layout>
          <v-flex lg12 class="container">
            <v-text-field
              class="text-container"
              v-model="inputs[i].text"
              label="Text"
              placeholder
              required
            ></v-text-field>
          </v-flex>

          <v-flex md5 class="container">
            <v-text-field
              class="num-container"
              v-model="inputs[i].sec"
              label="Millisec"
              required
              type="number"
            ></v-text-field>
          </v-flex>

          <v-flex lg12 class="container">
            <v-btn class="blue" @click="addLines(i)" v-show="i == inputs.length - 1">
              <fa-icon icon="plus-circle" />
            </v-btn>
          </v-flex>
          <!-- <v-flex lg6 class="container">
            <v-btn class="green" @click="onSubmit(i)">
              <fa-icon icon="play" />
            </v-btn>
          </v-flex>-->
          <v-flex lg6 class="container">
            <v-btn class @click="deleteLines(i)">
              <fa-icon icon="trash" />
            </v-btn>
          </v-flex>
        </v-layout>
      </v-container>
    </v-form>
    <v-flex class="right">
      <v-btn class="green" height="50px" size @click="onSubmit">
        <fa-icon icon="play" class="fa-2x" />
      </v-btn>
    </v-flex>
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Config",
  data() {
    return {
      inputs: [
        {
          text: "",
          sec: 0
        }
      ]
    };
  },

  methods: {
    ...mapActions(["setMessage", "setSec"]),

    onSubmit() {
      console.log(1);

      this.inputs.forEach((input, i) => {
        this.setMessage(this.inputs[i].text);
        this.setSec(this.inputs[i].sec);

        console.log(this.inputs[i].text);
        console.log(this.inputs[i].sec);
      });

      this.text = "";
      this.sec = "";
    },
    addLines() {
      this.inputs.push({ text: "", sec: 0 });
    },

    onChange() {
      console.log("changed");
    },

    deleteLines(index) {
      this.inputs.splice(index, 1);
    }
  }
};
</script>

as you can see the onSubmit method i am setting the setMessage and the setSec to the what was given in each form, now the problem is that it saves only the last one so i think i am having a problem in my storejs file, please show me how could i make my storejs so that it will contain all my values so i can use all of them later.

MY STOREJS:

const state = {
  message: '',
  sec: 0,
  // other state
};
const getters = {
  message: (state) => {
    return state.message;
  },

  sec: (state) => {
    return state.sec;
  },
  // other getters
};

const actions = {
  setMessage: ({ commit, state }, newValue) => {
    commit('SET_MESSAGE', newValue);
    return state.message;
  },

  setSec: ({ commit, state }, newSecVal) => {
    commit('SET_TIMEOUT', newSecVal);
    return state.sec;
  },
  // other actions
};
const mutations = {
  SET_MESSAGE: (state, newValue) => {
    state.message = newValue;
  },

  SET_TIMEOUT: (state, newSecVal) => {
    state.sec = newSecVal;
  },
  // other mutations
};

export default {
  state,
  getters,
  actions,
  mutations,
};

Answer 1

What you are doing is basically overwriting your message for each iteration of your loop.

If you want to pass all the lines of your local data to your store, then in store.js message should be an array like so:

const state = {
  messages: []
  // ...
}

Change your action to:

setMessages: ({ commit, state }, inputs) => {
  commit('SET_MESSAGES', inputs.map(x => x.message));
  return state.message;
},

And in your component:

onSubmit() {
  this.setMessages(this.inputs);
}