나는 다음과 같이, 나는 <a href="https://vuex.vuejs.org/en/intro.html" rel="noreferrer">vuex</a> 상점이

Question

Vuex 저장소에 돌연변이 중 하나에서 커밋 호출 할 수 SET_PRODUCTS, 그러나 이것은 나에게 오류를 제공합니다

projectFilter.js:22 Uncaught (in promise) ReferenceError: commit is not defined(…)

올바른 방법으로이 작업을 수행해야합니다. 나는 store.commit과 this.commit을 시도했지만 이것들 역시 비슷한 오류를주었습니다.

Answer 1

이미 돌연변이를 수행 중이면 commit 다른 돌연변이에 대한 방법이 없습니다. 돌연변이는 상태를 변경하는 동기식 호출입니다. 한 돌연변이 내에서 다른 돌연변이를 일으킬 수는 없습니다. https://vuex.vuejs.org/en/api.html

당신이 볼 수 있듯이, 돌연변이 핸들러는 state 및 payload, 아무것도 더를 수신 : 여기

는 Vuex에 대한 API 참조입니다. 따라서 commit은 undefined으로 표시됩니다.

위의 경우, 단일 커밋과 동일한 변형 처리기의 일부로 PRODUCT 및 CATEGORY를 설정할 수 있습니다. 다음과 같은 코드가 작동하는 경우에 당신은 시도 할 수 있습니다 :

// mutations 
const mutations = { 
    SET_PRODUCTS_AND_CATEGORIES: (state, response) => { 
     state.products = response.data.products 
     state.categories = state.products.map(function(product) { return product.category}) 
    }, 
    // ... 
} 

편집 :이 다니엘 S. Deboer에서 제공하는 아래의 대답을 참조하십시오. 올바른 방법은 그의 대답에 설명 된대로 단일 액션에서 두 개의 돌연변이를 저지르는 것입니다.

Answer 2

여러 개의 돌연변이 사이의 상태에 영향을주는 몇 가지 공통적 인 코드가 있다면 모든 돌연변이에 동일한 코드를 복제해야합니까? 아니면 더 좋은 방법이 있을까요?

Answer 3

돌연변간 코드를 공유하려면 작업을 수행하는 새 기능을 만들어야하며 다시 사용할 수 있습니다. 다행스럽게도 돌연변이는 단순한 오래된 함수 일 뿐이므로 우리가 좋아하는 한 state 매개 변수를 전달할 수 있으므로 매우 쉽게 수행 할 수 있습니다. 예를 들어

: 귀하의 경우

const mutations = { 
SET_PRODUCTS: (state, response) => { 
    state.products = response.data.products 
    setCategories(state) 
}, 
SET_CATEGORIES: (state) => { 
    setCategories(state) 
} 
} 

function setCategories(state) { 
    state.categories = state.products.map(product => product.category) 
} 

Answer 4

당신은 단 하나의 돌연변이, 즉 SET_PRODUCTS을 가진 고려해야합니다.

// mutations 
const mutations = { 
SET_PRODUCTS: (state, response) => { 
    state.products = response.data.products 
    state.categories = state.products.map(function(product) { return product.category}) 
} 
} 

별도로 SET_CATEGORIES를 호출 할 필요가 없습니다. 그것에 대해 생각 해봐! 제품이 변경되면 카테고리는 변경 될 수 있습니다. 제품은 SET_PRODUCTS를 통해서만 변경할 수 있습니다.

Answer 5

절대적으로 2 개의 돌연변이를 저지해야한다면, 어떤 행동으로 돌보지 않으시겠습니까? 작업은 비동기 작업을 수행 할 필요가 없습니다.

commitTwoThings: ({commit}, payload) => { 
    commit('MUTATION_1', payload.thing) 
    commit('MUTATION_2', payload.otherThing) 
} 

Answer 6

편집 : 당신은 당신의 행동에서 commit 메소드에게 당신과 같이 상태와는 같은 방법으로 destructure 수 https://vuex.vuejs.org/en/getters.html
: 나는 매우 비슷한 문제 나에 대한 솔루션을 우연히 발견하는 것은 vuex 게터를 사용하는 것이 었습니다 카테고리는 실제로 제품의 "계산 된"버전입니다. 범주를 게터로 사용하면 제품과 동기화 된 상태를 유지하고 저장소의 데이터를 복제하지 않아도됩니다.

제목의 질문에 대답하기 위해 나는 원래의 대답을 남깁니다.
다니엘 Buckmaster 솔루션에 대한 대안 :

const mutations = { 
SET_PRODUCTS: (state, response) => { 
    state.products = response.data.products 
    this.SET_CATEGORIES(state) 
}, 
SET_CATEGORIES: (state) => { 
    state.categories = state.products.map(product => product.category) 
} 
} 

당신이 직접 돌연변이 자체를 호출 할 수 있습니다 볼 수 있듯이. 이 코드 중복 또는

Answer 7

Vuex documentation on Actions 읽기 추가 기능없이 돌연변이를 구성하는 실제 방법입니다
나는 이것이 원래의 질문에 더 적절한 대답이라고 생각 (다니엘이 말한대로, 그들은 단지 일반 기능은 결국 있습니다) , 그들이 무엇을 위해 만들어 졌는지 확실히 분명합니다.

• 대신 (안 해야)는 비동기 코드를 포함 할 수있는 임의의 비동기 작업

작업을 포함 할 수있는 상태

를 돌연변이의 돌연변이를 커밋합니다. 사실, 다음 예제는 올바르다.

increment (context) { 
    context.commit('increment') 
} 

다중 변형을 수행하기위한 작업을 사용하는 데 어떤 문제도 나타나지 않는다.