Vuex 모듈이 작동하지 않는 이유는 무엇입니까?[vuex] 알 수 없는 변환 유형: moduleName/mutation

Vuex 모듈이 작동하지 않는 이유는 무엇입니까?[vuex] 알 수 없는 변환 유형: moduleName/mutation

몇 시간 동안 검색했는데 왜 이런 오류가 발생하는지 이해할 수 없습니다: [vuex] guildleStore/getStoreApple은 guildleStore-module의 모든 돌연변이에 대한 커밋입니다.내가 보기엔 규칙대로 하고 있어.guildle Store 모듈로 기능을 수행하려고 할 때 제가 무엇을 잘못하고 있는지 알고 있다면 도와주세요.

이것은 my index.js: src/store/index.js에 있습니다.

import Vue from "vue";
import Vuex from "vuex";
import * as groceryStore from "./modules/groceries";
Vue.use(Vuex);

export default new Vuex.Store({
  modules: {
   groceryStore: groceries,
  }
});

접속하려는 모듈은 다음과 같습니다.src/store/displays/displaysjs

import { db } from "../../main";
const groceryStore = {
  namespace: true,
  state: {
    fruit: {},
    fish: {},
    meat: {},
    sauce: {},
    spices: {},
    vegetables: {},
    bakery: {},
    beverages: {},
  },
  mutations: {
    getStoreApple(state) {
      db.ref()
        .child("groceries")
        .child("Fruits")
        .child("Apple")
        .get()
        .then((usersObject) => {
          state.fruit = usersObject.val();
        });
    },
    getStoreFish(state) {
      db.ref()
        .child("groceries")
        .child("fish")
        .child("salmon")
        .get()
        .then((usersObject) => {
          state.fish = usersObject.val();
        });
    },
    getStoreMeat(state) {
      db.ref()
        .child("groceries")
        .child("meat")
        .child("chicken")
        .get()
        .then((usersObject) => {
          state.meat = usersObject.val();
        });
    },
    getStoreSauce(state) {
      db.ref()
        .child("groceries")
        .child("sauce")
        .child("mustard")
        .get()
        .then((usersObject) => {
          state.sauce = usersObject.val();
        });
    },
    getStoreSpices(state) {
      db.ref()
        .child("groceries")
        .child("spices")
        .child("chillipowder")
        .get()
        .then((usersObject) => {
          state.spices = usersObject.val();
        });
    },
    getStoreVegetables(state) {
      db.ref()
        .child("groceries")
        .child("vegtables")
        .child("carrot")
        .get()
        .then((usersObject) => {
          state.vegetables = usersObject.val();
        });
    },
    getStoreBakery(state) {
      db.ref()
        .child("groceries")
        .child("bakery")
        .child("bread")
        .get()
        .then((usersObject) => {
          state.bakery = usersObject.val();
        });
    },
    getStoreBeverages(state) {
      db.ref()
        .child("groceries")
        .child("beverages")
        .child("juices")
        .get()
        .then((usersObject) => {
          state.beverages = usersObject.val();
        });
    },
  },
  getters: {
    appleGetter(state) {
      return state.fruit;
    },
    fishGetter(state) {
      return state.fish;
    },
    meatGetter(state) {
      return state.meat;
    },
    sauceGetter(state) {
      return state.sauce;
    },
    spicesGetter(state) {
      return state.spices;
    },
    vegetablesGetter(state) {
      return state.vegetables;
    },
    bakeryGetter(state) {
      return state.bakery;
    },
    beveragesGetter(state) {
      return state.beverages;
    },
  },
};

export default groceryStore;

이 컴포넌트는 코드를 렌더링하는 컴포넌트입니다.src/views/Home표시하다

<template>
  <div class="home">
    <h1 v-if="route">This is a {{ route }} page</h1>
    <div id="flexContainer">
      <div
        class="groceryNameContainer"
        v-for="grocery in groceries"
        :key="grocery.id"
      >
        <b-card
          title=""
          img-alt="Image"
          img-top
          tag="article"
          style="max-width: 20rem;"
          class="mb-2"
          ><b-card-img v-if="grocery.url" :src="grocery.url"></b-card-img>
          <b-card-text>
            {{ grocery.description }}
          </b-card-text>
          <b-card-text>
            {{ grocery.price }}
          </b-card-text>
          <b-card-text>
            {{ grocery.comparison }}
          </b-card-text>

          <b-button href="#" variant="primary">Add to Cart</b-button>
        </b-card>
      </div>
    </div>
    <router-view />
  </div>
</template>

<script>
// import { db } from "../main";
export default {
  data() {
    return {
      route: "",
    };
  },

  computed: {
    groceries: function() {
      var groceriesArray = [];
      groceriesArray.push(this.$store.getters["groceryStore/appleGetter"]);
      groceriesArray.push(this.$store.getters["groceryStore/fishGetter"]);
      groceriesArray.push(this.$store.getters["groceryStore/meatGetter"]);
      groceriesArray.push(this.$store.getters["groceryStore/sauceGetter"]);
      groceriesArray.push(this.$store.getters["groceryStore/spicesGetter"]);
      groceriesArray.push(this.$store.getters["groceryStore/vegetablesGetter"]);
      groceriesArray.push(this.$store.getters["groceryStore/bakeryGetter"]);
      groceriesArray.push(this.$store.getters["groceryStore/beveragesGetter"]);
      console.log(groceriesArray);
      return groceriesArray;
    },
  },

  created() {
    this.$store.commit("groceryStore/getStoreApple");
    this.$store.commit("groceryStore/getStoreFish");
    this.$store.commit("groceryStore/getStoreMeat");
    this.$store.commit("groceryStore/getStoreSauce");
    this.$store.commit("groceryStore/getStoreSpices");
    this.$store.commit("groceryStore/getStoreVegetables");
    this.$store.commit("groceryStore/getStoreBakery");
    this.$store.commit("groceryStore/getStoreBeverages");

    this.route = this.$route.name;
  },
};
</script>

<style>
.nestedGroceryInfoContainer {
  border: 1px solid black;
  margin: 10px;
  padding: 15px;
  border-radius: 5px;
}

.descriptionContainer {
  font-weight: 500;
  padding-top: 200;
  color: rgb(6, 6, 43);
}

.nav-text-collapse {
  background-color: rgb(0, 255, 13);
}
.nameContainer {
  font-weight: bold;
  text-decoration: underline;
}
.priceContainer {
  position: absolute;
  margin-top: 13%;
  border: none;
  font-weight: bold;
  font-size: 30px;
}

.groceryNameContainer > * {
  flex-basis: 45%;
}

#flexContainer {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.innerProductContainer {
  margin-left: 28%;
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
  margin-top: -65%;
  width: 30%;
  height: 46%;
}
.productImage {
  margin-left: 55px;
  height: 150px;
  width: 160px;
}
.detailsContainer {
  justify-content: center;
  display: flex;
  flex-wrap: wrap;
}
.comparisonContainer {
  color: #2f2626;
}
</style>

main.js 파일도 다음과 같습니다.

import App from "./App.vue";
import router from "./router";
import store from "./store";
import Vue from "vue";



Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount("#app");

몇 가지 의견을 교환한 후 몇 가지 조사를 해보니 최근에 작성한 꽤 간단한 Vuex 모듈의 예가 발견되었습니다.스토어, 모듈, 컴포넌트를 여기에 게시합니다.

어플리케이션이 훨씬 복잡하다는 것은 분명합니다만, Vuex 스토어에서 모듈 Import를 다음과 같이 코드화했습니다.

import * as groceryStore from "./modules/groceries";

반면 내 스토어에서는 모듈 Import를 다음과 같이 코드화했습니다.

import userModule from './modules/user-store-module.js'

저는 JavaScript 모듈 전문가는 아니지만, 그걸 지적할 수 있을 것 같아요.소스 파일은 다음과 같습니다.

편집: 네임스페이스, 게터, 돌연변이 및 이들을 사용하기 위한 추가 컴포넌트 기능을 추가했습니다.

/store/index.displaces

import Vue from 'vue'
import Vuex from 'vuex'

import userModule from './modules/user-store-module.js'

Vue.use(Vuex)

export default new Vuex.Store({
  modules: {
    userModule: userModule
  }
})

/store/syslog/user-store-syslog.syslogs

const userModule = {
  namespaced: true,
  state: () => ({
    users: [
      {
        id: 1,
        name: 'User1',
        gender: 'male'
      },
      {
        id: 2,
        name: 'User2',
        gender: 'female'
      },
      {
        id: 3,
        name: 'User3',
        gender: 'male'
      },
      {
        id: 4,
        name: 'User4',
        gender: 'female'
      },
    ]
  }),
  getters: {
    getMaleUsers: state => {
      return state.users.filter( user => user.gender === 'male')
    },
    getFemaleUsers: state => {
      return state.users.filter( user => user.gender === 'female')
    },
  },
  mutations: {
    addUser(state, newGender) {
      let nextId = state.users.length + 1;
      state.users.push({
        id: nextId,
        name: 'User' + nextId,
        gender: newGender
      })
    }
  }
}

export default userModule;

Vuex 모듈표시하다

<template>
  <div class="vuex-module">
    <div class="row">
      <div class="col-md-6">
        <h4>Users</h4>
        <table class="table table-bordered">
          <thead>
            <tr>
              <th>ID</th>
              <th>NAME</th>
              <th>GENDER</th>
            </tr>
          </thead>
          <tbody>
            <tr v-for="user in users" :key="user.id">
              <td>{{ user.id }}</td>
              <td>{{ user.name }}</td>
              <td>{{ user.gender }}</td>
            </tr>
          </tbody>
        </table>
        <button type="button" class="btn btn-secondary" @click="addUser">Add Random User</button>
      </div>

      <div class="col-md-6">
        <div class="row">
          <div class="col-md-12">
            <h4>Male Users</h4>
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>NAME</th>
                  <th>GENDER</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="user in maleUsers" :key="user.id">
                  <td>{{ user.id }}</td>
                  <td>{{ user.name }}</td>
                  <td>{{ user.gender }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>

        <div class="row">
          <div class="col-md-12">
            <h4>Female Users</h4>
            <table class="table table-bordered">
              <thead>
                <tr>
                  <th>ID</th>
                  <th>NAME</th>
                  <th>GENDER</th>
                </tr>
              </thead>
              <tbody>
                <tr v-for="user in femaleUsers" :key="user.id">
                  <td>{{ user.id }}</td>
                  <td>{{ user.name }}</td>
                  <td>{{ user.gender }}</td>
                </tr>
              </tbody>
            </table>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        gender: 'male'
      }
    },
    computed: {
      users() {
        return this.$store.state.userModule.users;
      },
      maleUsers() {
        return this.$store.getters['userModule/getMaleUsers'];
      },
      femaleUsers() {
        return this.$store.getters['userModule/getFemaleUsers'];
      }
    },
    methods: {
      addUser() {
        let nextGender = this.gender === 'male' ? 'female' : 'male';
        this.gender = nextGender;
        this.$store.commit('userModule/addUser', this.gender);
      }
    }
  }
</script>

import * as groceryStore from "./modules/groceries";

파일로부터의 모든 내보내기 오브젝트가 표시됩니다.(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import#import_an_entire_modules_contents)

당신의 경우, 그것은 아마도 당신에게 어떤 대상을 줄 것이다.

 {
     default: {}// your groceries object
    }

그러니까 한번 해봐

 import groceryStore from "./modules/groceries";

언급URL : https://stackoverflow.com/questions/66818790/why-isnt-my-vuex-modules-working-vuex-unknown-mutation-type-modulename-mutat