vuex에서 '정의되지 않은' 값을 수정하는 방법

vuex에서 '정의되지 않은' 값을 수정하는 방법

내 경로에 매개 변수를 전달하려고 하지만 매개 변수가 내 스토어에 도달하면action, 그것은 나에게 준다.undefined에러!

파라미터 이름을 변경해 보았지만, 그뿐만 아니라$route.params.id거기서 불러냈지만 아직 효과가 없어요!

vue-dev 툴에 표시됨

아침 식사.표시하다

<router-link to="/menu/add/1" tag="h2" class="pull-right">Add Menu</router-link>

메뉴 추가표시하다

methods: {
  ...mapActions(['addMenu']),
  addMenuItem() {
    this.addMenu(this.menu, this.$route.params.typeId);
  }
}

router.displaces

{ path: '/menu/add/:typeId', component: MenuAdd }

주

state: {
    menu: [],
    breakfastMenu: [],
    lunchMenu: [],
    dinnerMenu: []
  }

액션.

addMenu: ({ commit }, { name, price, description }, typeId) => {
  commit('ADD_MENU', { name, price, description }, typeId);
  alert('Menu Successfully Added');
}

돌연변이

'ADD_MENU': (state, { name, price, description }, typeId) => {
   state.menu.forEach((element) => {
     if (element.id == state.menu.length) {
       state.menu.push({
        id: element.id + 1,
        name: name,
        price: price,
        categoryId: typeId,
        description: description
       })
     }
   })
  }
}

나는 나의 것을 원한다.typeId작업하고 매개 변수를 에 보냅니다.store.js내가 원하는 결과를 얻을 수 있도록

Vuex 작업에는 단일 페이로드만 전달할 수 있습니다.

https://vuex.vuejs.org/api/ #syslog

이 회선은 2개의 payload를 통과하려고 합니다.

this.addMenu(this.menu, this.$route.params.typeId);

두 번째 인수는 다음과 같이 처리됩니다.options위해서dispatch셋팅에 사용됩니다.root: true여기엔 관련이 없어요사실상typeId그냥 버려지는 거야

다음 두 개의 인수를 단일 페이로드 개체로 묶어야 합니다.

this.addMenu({ menu: this.menu, typeId: this.$route.params.typeId });

그런 다음 다음과 같은 방법으로 이를 분해할 수 있습니다.

addMenu: ({ commit }, { menu: { name, price, description }, typeId }) => {

개인적으로 내 취향에 맞지 않는 주장이 너무 심해서 방법론으로 옮겼을 것 같아.

언급URL : https://stackoverflow.com/questions/57554961/how-to-fix-undefined-values-in-vuex