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

我已经搜索了几个小时，我不明白为什么会出现这样的错误： [vuex]未知突变类型：groceryStore/getStoreApple对groceryStore模块中所有突变的提交。 就我所知，我是照章办事的。如果您知道我在尝试访问groceryStore模块中的函数时做错了什么，请提供帮助

这是我的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,
  }
});

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
  }
})

以下是我尝试访问的模块： 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>

---

在我们交换了一些评论之后，我做了一些挖掘，发现了一个我最近构建的相当简单的Vuex模块示例。我在这里发布商店、模块和组件

您的应用程序显然要复杂得多，但我注意到，在Vuex存储中，您将模块导入编码为

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

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

而在我的商店里，我将模块导入编码为

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

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

我不是JavaScript模块专家，但我想我会指出这一点。以下是我的源文件：

编辑：我添加了名称空间、getter、mutations和其他组件功能来使用它们

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

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/modules/user-store-module.js

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;

VuexModule.vue

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

使用者
身份证件
名称
性别
{{user.id}
{{user.name}
{{user.gender}
添加随机用户
男性用户
身份证件
名称
性别
{{user.id}
{{user.name}
{{user.gender}
女性用户
身份证件
名称
性别
{{user.id}
{{user.name}
{{user.gender}
导出默认值{
数据（）{
返回{
性别：'男性'
}
},
计算：{
用户（）{
返回此。$store.state.userModule.users；
},
恶意用户（）{
返回此.store.getters['userModule/getMaleUsers']；
},
女性用户（）{
返回此。$store.getters['userModule/getFemaleUsers']；
}
},
方法：{
addUser（）{
让nextGender=this.gender=='male'？'female'：'male'；
this.gender=nextGender；
this.$store.commit（'userModule/addUser'，this.gender）；
}
}
}

将为您提供文件中所有导出的对象。（）

在你的情况下，它可能会给你一个对象

 {
     default: {}// your groceries object
    }

所以请试试看

 import groceryStore from "./modules/groceries";

---

我对Vuex很有经验，但还没有使用过模块。但是，在快速查看文档之后，您似乎缺少Vuex“modules”属性：

new Vuex.Store（{modules:{a:moduleA}}）

这是一个很好的观点，但恐怕它没有修复任何问题。仍然得到相同的错误：（我看到您添加了

Vue.use（Vuex）

，但我看不出您是否真的在Vue实例上添加了存储（例如：在

main.js

文件中，您将有

新的Vue（{el:“#app”，store:store}）

如果您仍然有问题，我建议暂时将模块从等式中删除。只需在一个文件中构建Vuex存储区，而不使用名称空间。一旦工作正常，您可以重新添加模块/名称空间，然后查看它是否再次中断。hehe@Tim，这正是我所做的，我很震惊。当它都在中的Index.js中时在路由器文件夹旁边，它就像一个魔咒一样工作。一切看起来都很棒，只是我似乎找不到我在做什么不同…我想知道它是否与我使用Vue 2x有关？我想我可能已经发现了问题。看看你问题中的'src/store/index.js'文件，你的导入是

import*，作为groceryStore从“/modules/groceries”

，但在

new Vuex.Store（）

中，您编写了

模块：{groceryStore:groceries，}

。我认为应该是

模块：{groceryStore:groceryStore，}

（不是groceries），甚至缩短为

模块：{groceryStore}

。请告诉我这是否解决了问题。