Vuex 돌연변이 내 getter 액세스

Vuex 돌연변이 내 getter 액세스

Vuex 스토어 돌연변이 내에서 getter에 접속할 수 있습니까?다음 예를 들어 보겠습니다.

new Vuex.Store({
    state: {
        question: 'Is it possible to access getters within a Vuex mutation?'
    },
    mutations: {
        askQuestion(state) {
            // TODO: Get question from getter here
            let question = '';

            if (question) {
                // ...
            }
        }
    },
    getters: {
        getQuestion: (state) => {
            return state.question;
        }
    }
});

물론 이 예는 그다지 의미가 없습니다.왜냐하면,question직접 소유물state하지만 내가 뭘 하려는지 봤으면 좋겠어즉, 조건부로 상태를 조작합니다.

돌연변이 안에서this이undefined및 그state파라미터는 에 액세스 할 수 있습니다.state다른 가게가 아닌 다른 가게가 아니라요

돌연변이에 대한 문서에는 이런 것에 대한 어떤 언급도 없습니다.

내 추측으로는 내가 놓친 게 아니라면 불가능할 것 같아.이 로직을 스토어 밖에서 실행하거나(코드 복제의 결과로), 또는 이를 실행하는 액션을 실행하는 것이 대체 방법이라고 생각합니다.액션은 스토어 컨텍스트 전체에 액세스 할 수 있기 때문입니다.저는 그것이 더 나은 접근법이라고 확신합니다. 그것은 돌연변이가 실제로 무엇을 해야 하는지에 초점을 맞추는 것입니다. 즉, 국가를 변이시키는 것입니다.아마 그렇게 될 거예요, 하지만 돌연변이 안에 있는 게터에게 접근하는 게 가능할지 궁금해서요.

Vuex 스토어 변환 메서드는 getter에 대한 직접 액세스를 제공하지 않습니다.

이는 아마도 잘못된 방법일 것입니다*. 단, 다음 항목에 대한 참조를 전달할 수 있습니다.getters다음과 같은 돌연변이를 저지르는 경우:

actions: {
  fooAction({commit, getters}, data) {
    commit('FOO_MUTATION', {data, getters})
  }
},
mutations: {
  FOO_MUTATION(state, {data, getters}) {
    console.log(getters);
  }
}

---

* Vuex 상태에 직접 영향을 미치는 경우에만 돌연변이를 가능한 한 단순하게 유지하는 것이 가장 좋습니다.이것은 부작용에 대해 생각할 필요 없이 상태 변화에 대해 추론하는 것을 더 쉽게 만든다.vuex getters의 베스트 프랙티스를 따르면 처음부터 부작용이 발생하지 않습니다.그러나 getter를 참조해야 하는 모든 논리는 getter 및 상태에 대한 읽기 액세스 권한을 가진 동작에서 실행될 수 있습니다.그러면 그 논리의 출력이 돌연변이에 전달될 수 있습니다.따라서 참조를 에 전달할 수 있습니다.getters돌연변이에 반대하지만 그럴 필요도 없고 물을 흐리게 만들죠

게터 및 돌연변이를 별도의 모듈에 배치하는 경우 돌연변이에 게터를 가져온 다음 다음을 수행할 수 있습니다.

import getters from './getters'

askQuestion(state) {
  const question = getters.getQuestion(state)
  // etc
}

간단한 솔루션을 찾고 있는 사람이 있다면 @bbugh는 돌연변이와 getter가 모두 같은 기능을 사용하도록 함으로써 이 문제를 해결하는 방법을 기술했다.

function is_product_in_cart (state, product) {
  return state.cart.products.indexOf(product) > -1
}

export default {
  mutations: {
    add_product_to_cart: function (state, product) {
      if (is_product_in_cart(state, product)) {
        return
      }
      state.cart.products.push(product)
    }
  },

  getters: {
    is_product_in_cart: (state) => (product) => is_product_in_cart(state, product)
  }
}

수입하다한다고 가정하면요.foo은 이렇게 거예요.store/foo/mutations.js:

import index from '../index'
export const askQuestion = (state, obj) => {
    let store = index()
    let getQuestion = store.getters['foo/getQuestion']
}

나는 이것이 최선책이라고 말하는 것은 아니지만 효과가 있는 것 같다.

스토어를 식이라고 선언하면 다음과 같이 변환 내의 Store 객체를 참조할 수도 있습니다.

const Store = new Vuex.Store({
  state: {...},
  getters: {...},
  mutations: {
    myMutation(state, payload) {
      //use the getter
      Store.getters.getter
    }
  }
});

vuex 4에서 테스트 완료

const state = () => ({
  some_state: 1
})

const getters = {
  some_getter: state => state.some_state + 1
}

const mutations = {
  GET_GETTER(state){
    return getters.some_getter(state)
  }
}

컴포넌트 내 어딘가에

store.commit('GET_GETTER') // output: 2

언급URL : https://stackoverflow.com/questions/43258793/accessing-getters-within-vuex-mutations