Vuex - updating data in store from child $emit-CodePudding

I have a Vue app that can either randomize a title and subtitle OR manually edit these two values through a custom input component. When a user decides to edit, their input should then display on save those results on the parent component.

I have the randomizer and child component emitting the updated headings working, but having a troubled time updating the parents and state to display the custom input title and subtitle on save and getting a "undefined" error for both title and subtitle when I placed console logs in updateTitleAndSubtitle() in the actions section of the store.

The objective of this code challenging is to return the new values to the store and be able to display the custom inputs while having the randomizer handy whenever a user decides to use that instead.

Any direction on what I'm doing wrong or missing would be much appreciated. I've been reading article after article around Vuex and Vue2 for 3 days now with 2 months of experience using Vue.

Custom Input Child Component:

<template>
  <div>
    <label for="title">Edit Title: </label>
    <input
      type="text"
      id="title"
      :updateTitle="updateTitle"
      v-model="inputTitle"
    />

    <label for="title">Edit Subtitle: </label>
    <input
      type="text"
      id="subtitle" :updateSubtitle="updateSubtitle"
      v-model="inputSubtitle"
    />

  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    title: String,
    subtitle: String,
  },
  computed: {
    updateTitle() {
      console.log('updateTitle: ', this.title);
      return this.title;
    },
    updateSubtitle() {
      console.log('updateSubtitle: ', this.subtitle);
      return this.subtitle;
    },
    inputTitle: {
      get() {
        console.log('set title: ', this.title);
        return this.title;
      },
      set(title) {
        console.log('set title: ', title);
        this.$emit('input', title);
      },
    },
    inputSubtitle: {
      get() {
        return this.subtitle;
      },
      set(subtitle) {
        console.log('set subtitle: ', subtitle);
        this.$emit('input', subtitle);
      },
    },
  },
};
</script>

Parent component:

<template>
  <main >

    <div v-if="!editMode" >
      <div >
        <span >Title: </span>{{title}}
      </div>

      <div >
        <span >Subtitle: </span>{{subtitle}}
      </div>

      <div >
        <button id="randomize-button"  @click="randomizeTitleAndSubtitle">
          Randomize
        </button>
        <button id="edit-button"  @click="onEdit">Edit</button>
      </div>
    </div>

    <div v-else >

      <CustomInput
        :title="title"
        :subtitle="subtitle"
        @update="v => onSave(v)"
      />

      <div >
        <button id="cancel-button"  @click="onCancel">Cancel</button>
        <button id="save-button"  @click="onSave">Save</button>
      </div>
    </div>
  </main>
</template>

<script>
// @ is an alias to /src
import CustomInput from '@/components/CustomInput.vue';
import { mapState, mapActions } from 'vuex';

export default {
  name: 'Home',
  components: {
    CustomInput,
  },
  data() {
    return {
      editMode: false,
    };
  },
  computed: {
    ...mapState(['title', 'subtitle']),
  },
  methods: {
    ...mapActions(['randomizeHeadings', 'updateHeadings']),
    onEdit() {
      this.editMode = true;
    },
    onCancel() {
      this.editMode = false;
    },
    onSave(v) {
      this.editMode = false;
      this.title = v.title;
      this.subtitle = v.subtitle;
      this.updateTitleAndSubtitle(v);
    },
  },
  mounted() {
    this.randomizeHeadings();
  },
};

Vuex Store:

import randomWords from 'random-words';

export default new Vuex.Store({
  state: {
    title: '',
    subtitle: '',
  },
  mutations: {
    UPDATE_TITLE(state, value) {
      state.title = value;
    },
    UPDATE_SUBTITLE(state, value) {
      state.subtitle = value;
    },
  },
  actions: {
    randomizeTitle({ commit }) {
      const newTitle = randomWords();
      commit('UPDATE_TITLE', newTitle);
    },
    randomizeSubtitle({ commit }) {
      const newSubtitle = randomWords();
      commit('UPDATE_SUBTITLE', newSubtitle);
    },
    randomizeTitleAndSubtitle({ dispatch }) {
      dispatch('randomizeTitle');
      dispatch('randomizeSubtitle');
    },
    updateTitleAndSubtitle({ commit }) {
      const payload = {
        title: this.title || null,
        subtitle: this.subtitle || null,
      };

      commit('UPDATE_TITLE', payload);
      commit('UPDATE_SUBTITLE', payload);
    },
  },
  modules: {
  },
});

CodePudding user response：

I tested your code in my local development environment and find out that you need a lot of changes in your codes to work better. Here is the new vuex store code:

vuex store:

export default new Vuex.Store({
    state: {
        title: '',
        subtitle: '',
    },
    mutations: {
        UPDATE_TITLE(state, value) {
            state.title = value;
        },
        UPDATE_SUBTITLE(state, value) {
            state.subtitle = value;
        },
    },
    actions: {
        randomizeTitle({ commit }) {
            const newTitle = randomWords();
            commit('UPDATE_TITLE', newTitle);
        },
        randomizeSubtitle({ commit }) {
            const newSubtitle = randomWords();
            commit('UPDATE_SUBTITLE', newSubtitle);
        },
        randomizeTitleAndSubtitle({ dispatch }) {
            dispatch('randomizeTitle');
            dispatch('randomizeSubtitle');
        },
        updateTitleAndSubtitle({ commit }, inputUser) {
            /* I changed the structure of this action to work correctly */
            console.log(inputUser);
            commit('UPDATE_TITLE', inputUser.title);
            commit('UPDATE_SUBTITLE', inputUser.subtitle);
        },
    },
    modules: {
    },
});

Also here is the new Parent component code:

Parent component:

<template>
  <main >

    <div v-if="!editMode" >
      <div >
        <span >Title: </span>{{title}}
      </div>

      <div >
        <span >Subtitle: </span>{{subtitle}}
      </div>

      <div >
        <button id="randomize-button"  @click="randomizeTitleAndSubtitle">
          Randomize
        </button>
        <button id="edit-button"  @click="onEdit">Edit</button>
      </div>
    </div>

    <div v-else >

      <CustomInput
          :title="title"
          :subtitle="subtitle"
          @titleEvent = "myFuncTitle"
          @subTitleEvent = "myFuncSubTitle"
      />
      <!--
      I removed this part from your component.
      @update="v => onSave(v)"

      and also added custom events (titleEvent and subTitleEvent) to the component
      -->

      <div >
        <button id="cancel-button"  @click="onCancel">Cancel</button>
        <button id="save-button"  @click="onSave">Save</button>
      </div>
    </div>
  </main>
</template>

<script>
// @ is an alias to /src
import CustomInput from '../components/CustomInput.vue';
import { mapActions } from 'vuex';

export default {
  name: 'Parent',
  components: {
    CustomInput,
  },
  data() {
    return {
      editMode: false,
      /* defining new data for handling "cancel" button functionality */
      temporaryTitle: "",
      temporarySubTitle: ""
    };
  },

  computed: {
    /* defining setter and getter for each computed value separately */
    title: {
      // getter
      get: function () {
        return this.$store.state.title;
      },
      // setter
      set: function (newValue) {
        this.$store.commit('UPDATE_TITLE', newValue);
      }
    },
    subtitle: {
      // getter
      get: function () {
        return this.$store.state.subtitle;
      },
      // setter
      set: function (newValue) {
        this.$store.commit('UPDATE_SUBTITLE', newValue);
      }
    },
  },
  methods: {
    /* changing the name of actions according to the names defined in "store" */
    ...mapActions(['randomizeTitleAndSubtitle', 'updateTitleAndSubtitle']),
    onEdit() {
      this.editMode = true;
      this.temporaryTitle = this.$store.state.title;
      this.temporarySubTitle = this.$store.state.subtitle;
    },
    onCancel() {
      this.editMode = false;
      this.$store.commit('UPDATE_TITLE', this.temporaryTitle);
      this.$store.commit('UPDATE_SUBTITLE', this.temporarySubTitle);
    },
    myFuncTitle(event) {
      console.log(event);
      /* we could not set values to "computed" properties, if we had not defined "set: function ..." for them above.  */
      this.title = event;
    },
    myFuncSubTitle(event) {
      this.subtitle = event;
    },
    onSave(v) {
      this.editMode = false;
      console.log(v); /* "v" is not related to your data. notice the console */
      // this.title = v.title;
      // this.subtitle = v.subtitle;
      const payload = {
        title: this.title,
        subtitle: this.subtitle,
      };
      this.updateTitleAndSubtitle(payload);
    },
  },
  created() {
    this.randomizeTitleAndSubtitle();
  },
};
</script>

And finally here is the code of new Custom Input component:

Custom Input:

<template>
  <div>
    <label for="title">Edit Title: </label>
    <input
        type="text"
        id="title"
        v-model="inputTitle"
        @input="$emit('titleEvent', $event.target.value)"
    />
    <!-- emitting event like above code for each input -->

    <label for="title">Edit Subtitle: </label>
    <input
        type="text"
        id="subtitle"
        v-model="inputSubtitle"
        @input="$emit('subTitleEvent', $event.target.value)"
    />

  </div>
</template>

<script>
export default {
  name: 'CustomInput',
  props: {
    title: String,
    subtitle: String,
  },
  computed: {

    inputTitle: {
      get() {
        console.log('set title: ', this.title);
        return this.title;
      },
      set(title) {
        console.log('set title: ', title);
      },
    },
    inputSubtitle: {
      get() {
        return this.subtitle;
      },
      set(subtitle) {
        console.log('set subtitle: ', subtitle);
      },
    },
  },
};
</script>

<style scoped>

</style>

I tried to comment some changes to the codes, but the main changes are related to changing the name of mapActions actions according to the names defined in "store" and also provide a setter for computed properties.

I suggest that you read more in vue and vuex documentations, especially the page that is related to custom events and computed setters and vuex actions, if you have problems with my codes.