Vue의 돌연변이 및 작업이 작동하지 않음

Vue의 돌연변이 및 작업이 작동하지 않음

Store 폴더의 Index.js

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,
};

액션.js

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

돌연변이.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>

그template나의 일부home.vue정상적으로 동작하고 있습니다만, 상태를 바꿀 수 없습니다.위로해도 아무것도 안 나와요.아웃 오브 더mapActions제 생각에는appendPetpayload가 에 도달하지 않기 때문에 상태를 변환하는 메서드는 호출되지 않습니다.Action.js내 스토어의 액션에 도달하지 못했습니다.아마도mapActions그것을 통해 실행되지 않고 있습니다.appendPet.

mapActions는 함수이며 오브젝트로 사용하고 있습니다.

다음과 같은 것이 있습니다....mapActions["appendPet"]필요한 것은 다음과 같습니다....mapActions(["appendPet"])

상세한 것에 대하여는, 다음의 문서를 참조해 주세요.

mapActions on mutate 함수를 사용하고 있습니다.

언급URL : https://stackoverflow.com/questions/66825946/vues-mutations-and-actions-are-not-working