javascript - 为什么我的 Vuex 模块不工作？[vuex] 未知突变类型：moduleName/mutation

问题描述

我一直在寻找几个小时，我不明白为什么我会收到这个错误：[vuex] 未知的突变类型：groceryStore/getStoreApple 在所有对杂货店模块中的突变的提交上。据我所知，我是按书本做的。如果您在尝试使用杂货店模块中的功能时对我做错了什么有任何想法，请提供帮助。

这是我的 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/modules/groceries.js

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.vue

<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");

标签： javascriptvue.jsvuexvuex-modules

javascript - 为什么我的 Vuex 模块不工作？[vuex] 未知突变类型：moduleName/mutation

问题描述

解决方案

推荐阅读