Question

我试图在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数组。

请帮忙！

Answer 1

initBreakfastMenu是一项操作，您可能要使用this.initBreakfastMenu()

Answer 2

一些想法。

首先，这一行：

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是可疑的。通常，您只想直接通过计算属性来使用存储状态，而不是通过本地data来引用它。这不一定是错误的，您可能希望以这种方式从存储中分离组件数据，但是请记住，两者都引用相同的数组，因此对一个数组的修改也会影响另一个数组。您不是在复制数组，而是在创建对它的本地引用。

您还应该考虑state中是否确实需要4种菜单类型。如果breakfastMenu，lunchMenu和dinnerMenu都是从menu派生的，那么最好只使用getters来实现。 getters与计算属性等效，可以包含相关的过滤逻辑以从state.menu生成其值。

我的变异无效！我该如何纠正？

2 个答案: