Vue's Mutations and Actions are not working

Question

Index.js from the Store Folder

import Vue from "vue";
import Vuex from "vuex";

import state from "../store/state";
import mutations from "../store/mutations";
import actions from "../store/actions";

Vue.use(Vuex);

export default new Vuex.Store({
  state,
  mutations,
  actions,
});

State.js

/* eslint-disable */
import cats from "../data/cats.js";
import dogs from "../data/dogs.js";

export default {
  cats,
  dogs,
};

Actions.js

// method add pet -> dispatch action -> mutate -> state changes
export default {
  addPet: ({ commit }, payload) => {
    console.log("payload iss", payload);
    commit("appendPet", payload);
  },
};

Mutations.js

export default {
  appendPet: (state, { specie, pet }) => {
    console.log("specie and pet are", specie, pet);
    state[specie].append(pet);
  },
};

Home.vue

<template>
  <div class="home">
    <h1>Adopt a New Best Friend</h1>
    <button @click="formShow" class="btn btn-primary">Add New Pet</button>

    <b-form @submit.prevent="handleSubmit" v-if="showForm === true">
      <b-form-group id="input-group-2" label="Pet's Name:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="formData.name"
          type="text"
          placeholder="Enter name"
          required
        ></b-form-input>
      </b-form-group>

      <b-form-group id="input-group-3" label="Specie:" label-for="input-3">
        <b-form-select
          id="input-3"
          v-model="formData.specie"
          :options="['cats', 'dogs']"
          required
        ></b-form-select>
      </b-form-group>
      <b-form-group id="input-group-2" label="Pet's Age:" label-for="input-2">
        <b-form-input
          id="input-2"
          v-model="formData.age"
          type="number"
          placeholder="Enter Age"
          required
        ></b-form-input>
      </b-form-group>

      <b-button type="submit" variant="primary">Submit</b-button>
      <b-button type="reset" variant="danger">Reset</b-button>
    </b-form>
    <!-- <b-card class="mt-3" header="Form Data Result">
      <pre class="m-0">{{ formData }}</pre>
    </b-card> -->
  </div>
</template>

<script>
import { mapActions } from "vuex";
export default {
  name: "Home",

  data() {
    return {
      showForm: false,
      formData: {
        age: 0,
        specie: null,
        name: "",
      },
    };
  },
  methods: {
    ...mapActions["appendPet"],
    formShow() {
      this.showForm = !this.showForm;
    },

     // mapActions and appendPet do not show on console
    handleSubmit() {
      console.log("hello this is the handle submit method");
      // console.log("mapActions", ...mapActions);
      // console.log("appendPet gnnn.................", this.appendPet);
      const { specie, age, name } = this.formData;
      console.log("specie , age and name are", specie, age, name);
      const payload = { specie, pet: { name, age } };
      this.appendPet(payload);
    },
  },
};
</script>

The template part of my home.vue is working fine but I am not being able to mutate my state. I am getting nothing when I console.out the mapActions, I think that the appendPet method that mutates the state is not being called as the payload is not reaching the Action.js , not reaching the actions of my store. May be the mapActions is not being executed as through it, I am calling the appendPet.

Answer 1

mapActions is a function and you are using it as an Object:

You have: ...mapActions["appendPet"] And you need: ...mapActions(["appendPet"])

Check the docs for further info: