Vuex가 다른 어레이를 전달

Vuex가 다른 어레이를 전달

필터 작성:

돌연변이

export default {
 state: {
 filteredBrands: []
},

mutations: {
 showFilteredList(state, payload) {
   state.filteredBrands.push(payload);
  }
 }
};

방법들

    loadProducts(item) {
      axios.get('/api', {
      params: {
       per_page: 20,
       filter_machinery_brands: [ item ]
      }
    })
    .then((response) => {
      this.$store.commit(
        'showFilteredList',
        response.data
      );
    });

},

item체크 박스가 있는 입력입니다.클릭하면, 이 카테고리에 대한 요구가 서버에 송신됩니다.

어떤 이유에서인지 푸시가 작동하지 않습니다. 왜일까요?그리고 어레이가 같으면 삭제하고 그렇지 않으면 추가해 주세요.가능합니까?

어레이가 payload로 입력됩니다.그런 다음 어레이를 어레이에 푸시하려고 합니다.js 또는 ts 중 하나로 실행할 수 없습니다.

값을 설정할 수 있습니다.

state.filteredBrands = payload;

그렇지 않으면 다음과 같은 작업을 수행해야 합니다.

state.filteredBrands.push(payload[0]);

어레이 내의 기존 아이템을 제어하고,가 항상 값을 설정하는 것이 아니라 새로운 값을 어레이에 푸시하는 것을 전제로 하는 경우.다음과 같은 작업을 수행할 수 있습니다.

    if (state.filteredBrands.indexOf(payload[0]) === -1) {
        // Not in array
        state.filteredBrands.push(payload[0])
    } else {
        // is allready in array
        state.filteredBrands.forEach((item, index) => {
            if (item === payload[0]) {
                state.filteredBrands.splice(index, 1)
            }
        })
    }

편집: 내 추측이 맞았다.

payload가 어레이입니다.상태는 어레이 ---------> payload(array)를 state(array)로 푸시하려고 합니다.이것은 실행할 수 없습니다.이 솔루션은, 제 제안 후에, 보다 깨끗한 상태가 됩니다.

payload.forEach((value, index) => { // Looping payload 
    if (state.filteredBrands.indexOf(value) === -1) {
        state.filteredBrands.push(value) // push if value not allready in array
    } else {
        state.filteredBrands.splice(index, 1) // if value is in array -> remove
    }
})

예, 어레이를 어레이에 푸시할 수 있습니다.여기서 문제가 있는 것은 vuex 설정인 것 같습니다.

Vuex 상태는 함수이므로 다음과 같아야 합니다.

state () {
    return {
      filteredBrands: []
    }
  }

Nuxt를 사용하는 경우:

export const state = () => ({
  filteredBrands: []
})

언급URL : https://stackoverflow.com/questions/70288010/vuex-passing-different-arrays