0

我正在尝试将breakfastMenu数组设置state为如下所示，但我看不到数组正在填充我的 vue-devtools。

我已经正确设置了 Vuex 方法并检查了两次，我也没有收到任何错误。那么，为什么我的代码中有逻辑错误？

store.js：

export default new Vuex.Store({
  state: {
    menu: [],
    breakfastMenu: [],
    lunchMenu: [],
    dinnerMenu: []
  },
  mutations: {
    'SET_MENU': (state, menuMaster) => {
      state.menu = menuMaster;
    },
    'SET_BREAKFAST_MENU': (state, order) => {
      state.breakfastMenu.unshift(order);
    },
    'SET_LUNCH_MENU': (state, order) => {
      state.breakfastMenu.unshift(order);
    },
    'SET_DINNER_MENU': (state, order) => {
      state.breakfastMenu.unshift(order);
    },
  },
  actions: {
    initMenu: ({ commit }, menuMaster) => {
      commit('SET_MENU', menuMaster)
    },
    initBreakfastMenu: ({ commit, state }) => {
      state.menu.forEach((element) => {
        if (element.categoryId == 1) {
          commit('SET_BREAKFAST_MENU', element)
        }
      });
    },
    initLunchMenu: ({ commit, state }) => {
      state.menu.forEach((element) => {
        if (element.categoryId == 2) {
          commit('SET_LUNCH_MENU', element)
        }
      });
    },
    initDinnerMenu: ({ commit, state }) => {
      state.menu.forEach((element) => {
        if (element.categoryId == 3) {
          commit('SET_DINNER_MENU', element)
        }
      });
    },
  },
  getters: {
    getBreakfastMenu(state) {
      return state.breakfastMenu
    },
    getLunchMenu(state) {
      return state.lunchMenu
    },
    getDinnerMenu(state) {
      return state.dinnerMenu
    },
  }
})

Breakfast.vue：

import { mapActions, mapGetters } from 'vuex';

export default {
  data() {
    return {
      breakfastArray: []
    };
  },
  methods: {
    ...mapActions(['initBreakfastMenu']),
    ...mapGetters(['getBreakfastMenu']),
  },
  created() {
    this.initBreakfastMenu;
    this.breakfastArray = this.getBreakfastMenu;
  }
};

到目前为止没有错误消息！

我需要breakfastMenu填写数组store.js。

请帮忙！

4

2 回答 2

0

一些想法。

首先，这一行：

this.initBreakfastMenu;

您实际上并没有调用该方法。它应该是：

this.initBreakfastMenu();

下一个问题是这样的：

...mapGetters(['getBreakfastMenu']),

这条线本身很好，但它在你的methods. 它应该在computed节中。

您没有包含任何示例数据，state.menu但值得注意的是，initBreakfastMenu除非里面有合适的数据，否则不会做任何事情state.menu。我建议添加一些控制台日志记录，以确保那里的一切都按预期工作。

SET_BREAKFAST_MENU,SET_LUNCH_MENU并且SET_DINNER_MENU都在修改state.breakfastMenu. 我认为这是不正确的，每个人都应该修改各自的菜单。

我还要注意，使用本地数据breakfastArray是可疑的。通常，您只想通过计算属性直接使用存储状态，而不是通过 local 引用它data。这不一定是错误的，您可能希望以这种方式从存储中分离组件数据，但请记住，两者都引用同一个数组，因此对其中一个的修改也会影响另一个。您没有获取数组的副本，而只是创建了对它的本地引用。

您还应该考虑您的state. 如果breakfastMenu, lunchMenuanddinnerMenu都只是从中派生出来的，menu那么你最好只使用getters. getters是计算属性的存储等效项，并且可以包含相关的过滤逻辑以从中生成它们的值state.menu。

于 2019-08-18T04:02:40.940 回答
0

initBreakfastMenu是一个动作，你可能想使用this.initBreakfastMenu()

于 2019-08-18T03:45:36.890 回答