Vuex 스토어에 작업 추가

6463 단어 vueprogrammingjavascriptwebdev
https://www.amazon.com/John-Au-Yeung/e/B08FT5NT62에서 Amazon에서 내 책을 확인하십시오.

지금 http://jauyeung.net/subscribe/에서 내 이메일 목록을 구독하십시오.

Vue.js는 대화형 프론트 엔드 앱을 개발하는 데 사용할 수 있는 사용하기 쉬운 웹 앱 프레임워크입니다.

Vuex를 사용하면 Vue 앱의 상태를 중앙 위치에 저장할 수 있습니다.

이 기사에서는 Vuex 스토어에 작업을 추가하여 스토어의 상태를 변경하는 방법을 살펴보겠습니다.

작업이란 무엇입니까?



작업은 돌연변이와 유사하지만 상태를 변경하는 대신 돌연변이를 커밋합니다. 작업은 돌연변이와 달리 비동기 작업을 커밋할 수도 있습니다.

예를 들어 다음과 같이 간단한 작업을 추가할 수 있습니다.

const store = new Vuex.Store({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increase(state) {  
      state.count++;  
    }  
  },  
  actions: {  
    increase(context) {  
      context.commit("increase");  
    }  
  }  
});


작업은 context 개체를 취하며, 이 개체는 commit를 호출하여 돌연변이를 커밋하는 데 사용할 수 있습니다.

파견 조치


store.dispatch('increase') 를 호출하여 작업을 전달할 수 있습니다.

비동기 작업을 실행할 수 있기 때문에 돌연변이를 직접 커밋하는 것보다 훨씬 더 유용합니다.

예를 들어 Vue 앱에서 다음과 같이 작업을 전달할 수 있습니다.
index.js :

const store = new Vuex.Store({  
  state: {  
    count: 0  
  },  
  mutations: {  
    increase(state, payload) {  
      state.count += payload.amount;  
    }  
  },  
  actions: {  
    increaseAsync({ commit }, payload) {  
      setTimeout(() => {  
        commit("increase", payload);  
      }, 1000);  
    }  
  }  
});

new Vue({  
  el: "#app",  
  store,  
  methods: {  
    ...Vuex.mapActions(["increaseAsync"])  
  },  
  computed: {  
    ...Vuex.mapState(["count"])  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <script src=[https://unpkg.com/vuex"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="increaseAsync({amount: 10})">Increase</button>  
      <p>{{count}}</p>  
    </div>  
    <script src="index.js"></script>  
  </body>  
</html>


위의 코드에는 다음 코드가 포함된 작업increaseAsync이 있습니다.

increaseAsync({ commit }, payload) {  
  setTimeout(() => {  
    commit("increase", payload);  
  }, 1000);  
}


액션 메소드에서 액션을 전달할 때 전달하는 increase 객체로 payload 돌연변이를 커밋합니다.

Vue 인스턴스에는 다음이 있습니다.

methods: {  
    ...Vuex.mapActions(["increaseAsync"])  
},  
computed: {  
  ...Vuex.mapState(["count"])  
}

mapActions를 호출하여 저장소의 작업을 매핑하고 mapState를 사용하여 저장소에서 계산된 속성을 추가하여 계산된 속성으로 count에서 계산된 state.count 속성을 얻습니다.

그런 다음 템플릿에서 1초 후에 업데이트increaseAsync를 위해 증가 버튼을 누를 때 state.count를 호출합니다.

마지막으로 상점에서 상태를 매핑한 이후 업데이트된 숫자를 확인해야 합니다.

작업 작성



약속을 반환하는 작업을 연결할 수 있습니다.

예를 들어 다음과 같이 2개의 카운트를 업데이트하는 작업을 생성할 수 있습니다.
index.js :

const store = new Vuex.Store({  
  state: {  
    count1: 0,  
    count2: 0  
  },  
  mutations: {  
    increase(state, payload) {  
      state.count1 += payload.amount;  
    },  
    decrease(state, payload) {  
      state.count2 -= payload.amount;  
    }  
  },  
  actions: {  
    async increaseAsync({ commit }, payload) {  
      return Promise.resolve(commit("increase", payload));  
    },  
    async decreaseAsync({ commit }, payload) {  
      return Promise.resolve(commit("decrease", payload));  
    },  
    async updateCounts({ dispatch }, payload) {  
      await dispatch("increaseAsync", payload);  
      await dispatch("decreaseAsync", payload);  
    }  
  }  
});

new Vue({  
  el: "#app",  
  store,  
  methods: {  
    ...Vuex.mapActions(["updateCounts"])  
  },  
  computed: {  
    ...Vuex.mapState(["count1", "count2"])  
  }  
});

index.html :

<!DOCTYPE html>  
<html>  
  <head>  
    <title>App</title>  
    <meta charset="UTF-8" />  
    <script src="https://unpkg.com/vue/dist/vue.js"></script>  
    <script src="https://unpkg.com/vuex"></script>  
  </head>  
  <body>  
    <div id="app">  
      <button @click="updateCounts({amount: 10})">Update Counts</button>  
      <p>Count 1: {{count1}}</p>  
      <p>Count 2: {{count2}}</p>  
    </div>  
    <script src="index.js"></script>  
  </body>  
</html>


위의 코드에는 updateCounts 작업과 dispatch 작업이 포함된 increaseAsync 작업 전환 호출payload이 있습니다. 그런 다음 dispatch 작업 및 decreaseAsync 로 payload 를 호출합니다.
increaseAsync는 increase 돌연변이를 커밋하고 decreaseAsync는 decrease 돌연변이를 커밋합니다.

모두 Promise.resolve 가 있으므로 모두 비동기식입니다.

그런 다음 updateCounts 를 사용하여 Vue 인스턴스의 저장소에서 mapActions 작업을 포함합니다. 또한 count1 및 count2 상태를 mapState 와 함께 포함합니다.

그런 다음 Update Counts 버튼을 클릭하면 updateCounts 를 호출하고 버튼을 클릭하면 count1 및 count2가 업데이트됩니다. count1는 매번 10씩 증가하고 count2는 클릭할 때마다 10씩 감소해야 합니다.

결론



액션을 사용하여 하나 이상의 돌연변이를 커밋하거나 다른 액션을 전달할 수 있습니다.

돌연변이는 항상 동기식이므로 저장소 작업을 함께 그룹화하고 비동기식 코드를 실행하는 데 편리합니다.
mapActions를 사용하여 구성 요소에 포함할 수 있습니다.

작업은 dispatch 를 호출하여 전달되는 반면 돌연변이는 commit 메서드로 커밋됩니다.
[Vue.js 입문] Vue의 특징.
[JS] 드림코딩 JS 공부 #11

좋은 웹페이지 즐겨찾기

개발자 우수 사이트 수집

개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
best100-homepage