VueJ + Vuex + map Actions

VueJ + Vuex + map Actions

문서에는 동작을 통해 호출된 돌연변이를 제외하고 상태는 불변이라고 쓰여 있습니다.네 알겠습니다.

컴포넌트 mapGetters, mapActions에서 사용하고 있습니다.

스토어:

export default {
  namespaced: true,

  state: {
    color: "violet"
  },
  mutations: {
      changeColor(state, newColor) {
          state.color = newColor
      },
  },
  actions: {
    changeColor({ commit }, newColor) {
      commit('changeColor', newColor)
  }
 }

컴포넌트:

...
methods: {
    ...mapActions({
      setColor: 'store/changeColor',
    }),
    myMethodCallByButton(){
       this.setColor("blue").then(response => {
          console.log("change Color done")
       },err => {
          console.log("change Color error")
       })
    }
...

console.log()가 수신되지 않는 것을 제외하고, 메서드는 정상적으로 동작하고 스토어는 갱신됩니다.

매뉴얼에는 mapActions가 이와 동등하다고 기재되어 있습니다.$store.discl.discl.discl.s

• 왜 메시지를 받지 못하는 거죠?
• 다른 해결책이 있나요?

PS: mapGetters map, mapActions를 유지하고 싶습니다.나는 이것을 부르는 것을 좋아하지 않는다.$store.displays($store.syslogs)

PS2: 매장 내 모듈 사용

감사합니다.

모든 Vuex 작업은 를 반환합니다.

Vuex는 작업 기능의 결과를 로 정리합니다.그래서...changeColor액션 위치:

actions: {
  changeColor({ commit }, newColor) {
    myAsyncCommand();
  }
}

a를 반환한다.Promise으로 해결되다undefined그리고 그것은 완료를 기다리지 않을 것이다.myAsyncCommand();의 비동기 코드(비동기 코드가 포함되지 않은 경우 대기할 필요가 없습니다).

이 문제는 위의 코드가 다음 코드와 동일하기 때문에 발생합니다.

  changeColor({ commit }, newColor) {
    myAsyncCommand();
    return undefined;
  }

그리고 언제.dispatch('changeColor', ...)그러면 Vuex가 돌아옵니다.Promise.resolve(undefined).

필요한 경우Promise대기 액션에 의해 반환됩니다.반환할 필요가 있습니다.Promise자신을 기다리는 게 아니라다음과 같은 것들이 있습니다.

  changeColor({ commit }, newColor) {
    return new Promise((resolve, reject) => {
      myAsyncCommand().then(resolve);
    });
    // or, simply: return myAsyncCommand();
  }

상세한 것에 대하여는, 이하의 데모 실장을 참조해 주세요.

const myStore = {
  namespaced: true,
  state: { color: "violet" },
  mutations: {
      changeColor(state, newColor) {
          state.color = newColor
      }
  },
  actions: {
    changeColor_SIMPLE({ commit }, newColor) {
      commit('changeColor', newColor)
    },
    changeColor_COMPLICATED_NO_PROMISE({ commit }, newColor) {
        setTimeout(() => {
          commit('changeColor', newColor)
        }, 2000)
    },
    changeColor_COMPLICATED_WITH_PROMISE({ commit }, newColor) {
      return new Promise((resolve, reject) => {
        setTimeout(() => {
          commit('changeColor', newColor)
          resolve();
        }, 2000)
      });
    }
  }
};
const store = new Vuex.Store({
  modules: {
    store: myStore,
  }
});
new Vue({
  store,
  el: '#app',
  methods: {
    ...Vuex.mapActions({
      setColorSimple: 'store/changeColor_SIMPLE',
      setColorComplicatedNoPromise: 'store/changeColor_COMPLICATED_NO_PROMISE',
      setColorComplicatedWithPromise: 'store/changeColor_COMPLICATED_WITH_PROMISE',
    }),
    myMethodCallByButton(){
       this.setColorSimple("blue")
       	.then(response => console.log("SIMPLE done"),err => console.log("SIMPLE err"));
      this.setColorComplicatedNoPromise("blue")
       	.then(response => console.log("NO_PROMISE done"),err => console.log("NO_PROMISE err"));
      this.setColorComplicatedWithPromise("blue")
       	.then(response => console.log("WITH_PROMISE done"),err => console.log("WITH_PROMISE err"));
    }
  }
})

<script src="https://unpkg.com/vue@2.5.16/dist/vue.min.js"></script>
<script src="https://unpkg.com/vuex"></script>

<div id="app">
  <p>color: {{ $store.state.store.color }}</p>
  <button @click="myMethodCallByButton">click me and WAIT for 2s</button>
</div>

업데이트/댓글 단위:

mapAction/dispatch가 약속을 반환하더라도 저는 "변환"의 종료를 기다리는 약속을 추가해야 합니다.매뉴얼에서 mapAction을 통해 정확하게 관리되고 있다고 생각했습니다.정확한가요?

액션이 다음과 같은 변환만을 호출하는 경우:

actions: {
  changeColor({ commit }, newColor) {
    commit('changeColor', newColor)
    return undefined; // added for clarity
  }
}

그리고 돌아온 사람들은Promise다음 시간 이후에만 실행됩니다.commit()완료됩니다.

Vuex가 돌연변이를 대기하기 때문에 이 문제는 발생하지 않습니다.commits)

기다릴 필요가 없기 때문에 그렇게 되는 것입니다.이는 Vuex가 요구하기 때문입니다: 돌연변이는 동기 조작이어야 합니다.

돌연변이는 동기적이기 때문에, 그 선은return위의 명령어는 앞의 행의 코드 뒤에만 실행됩니다.commit('changeColor', newColor)).

주의: 돌연변이가 비동기 코드를 가지고 있는 경우, Vuex가 올바르게 동작하는 방법에 반하여 모든 종류의 예기치 않은 동작이 발생할 수 있으므로 동기화할 필요가 있습니다.

언급URL : https://stackoverflow.com/questions/49280576/vuejs-vuex-mapactions