CODEWITHSUNDEEP
vue.jsvuejs3vuex
Евгений Худак
Евгений Худак

Reputation: 61

How save the value entered in input using Vuex?

I started learning Veux. Using the example of creating a card and saving its contents. I created input bound it using two-way binding v-bind - passed it to State. And then nothing is clear. Maybe there are detailed lessons or your examples and help.

 <!-- Template
 <input id="nameTask" type="text" class="form-control" placeholder="Input Label For New ToDo"
        aria-describedby="basic-addon1" v-model="headPrivive">
   --!>
  <!-- Script
  headPrivive () {
   return this.$store.getters.headPrivive;
  } --!>
  <!--Store
   import { createStore } from 'vuex'

   const store = createStore({
   state: {
     headPrivive: " ",
     },
    --!>

Upvotes: 1

Views: 197

Answers (1)

Amini
Amini

Reputation: 1792

Create a variable in data in the component. This will be passed to the store. Set this variable as v-model to the input and later handle setting it in store. Use mutations to update the store states.

<template>
 <input
     @input="headPrivive()"
     id="nameTask"
     type="text"
     class="form-control"
     placeholder="Input Label For New ToDo"
     aria-describedby="basic-addon1"
     v-model="value"
>
</template>

<script>
export default {
  data() {
    return {
      value: ''
    }
  }
  methods: {
    headPrivive () {
      // *commit* is the built-in vuex method to call mutations.
      // The first parameter is the name of mutation
      // The second parameter is the data *value* being passed to the mutation as *payload*
      this.$store.commit('updateHeadPrivive', this.value)
    }
  }
}
</script>

import { createStore } from 'vuex'

const store = createStore({
  state: {
    headPrivive: " ",
  },
  mutations: {
    // Payload here is the *value* passed from the method *headPrivive* in the component
    updateHeadPrivive(state, payload) {
      this.headPrivive = payload
    }
  }
})

Upvotes: 2

Related Questions