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

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

계산 속성을 추가하거나 getter를 사용하여 Vue.js 앱에서 스토어 Vuex 스토어 변경 사항을 쉽게 볼 수 있습니다.

이 기사에서는 Vuex 스토어 상태를 양방향으로 보는 방법을 살펴보겠습니다.

계산된 속성

계산된 속성을 사용하여 저장소의 최신 값을 확인하고 반환할 수 있습니다.

예를 들어 다음 코드를 작성하여 저장소를 만든 다음 구성 요소의 값에 액세스할 수 있습니다.
main.js :

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
Vue.use(Vuex);

Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  }
});

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
export default {
  name: "App",
  computed: {
    count() {
      return this.$store.state.count;
    }
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};
</script>

위의 코드에서 main.js 상태를 유지하는 count에 상점이 있습니다.
store 인스턴스에 Vue를 넣습니다. 그런 다음 App.vue 에서 this.$store 를 사용하여 상점을 참조합니다.

그런 다음 count 속성의 count 메서드에서 수행한 computed 상태에 액세스할 수 있습니다.

결국, Increment 버튼을 클릭하여 count를 호출할 때 화면에 최신increment이 표시되어 저장소에 새 값을 커밋합니다.

게터

저장소에서 getter를 만든 다음 mapGetters 메서드를 사용하여 getter를 구성 요소의 계산된 속성으로 추가할 수 있습니다. 예를 들어 이를 수행하기 위해 다음을 작성합니다.
main.js :

import Vue from "vue";
import App from "./App.vue";
import Vuex from "vuex";
Vue.use(Vuex);

Vue.config.productionTip = false;

const store = new Vuex.Store({
  state: {
    count: 0
  },
  mutations: {
    increment(state) {
      state.count++;
    }
  },
  getters: {
    count: state => {
      return state.count;
    }
  }
});

new Vue({
  store,
  render: h => h(App)
}).$mount("#app");

App.vue :

<template>
  <div id="app">
    <button @click="increment">Increment</button>
    <p>{{count}}</p>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapGetters(["count"])
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};
</script>

위의 코드에서 store에 다음을 사용하여 getter를 추가했습니다.

getters: {
  count: state => {
    return state.count;
  }
}

main.js . 그런 다음 script 의 App.vue 섹션에는 다음이 있습니다.

import { mapGetters } from "vuex";
export default {
  name: "App",
  computed: {
    ...mapGetters(["count"])
  },
  methods: {
    increment() {
      this.$store.commit("increment");
    }
  }
};

getter를 계산된 속성으로 직접 추가하기 위해 mapGetters에서 vuex 메서드를 가져왔습니다.

우리가 전달한 배열mapGetters에서 저장소의 getter 이름을 전달하여 getter에서 반환된 값에 액세스합니다.

따라서 이전과 동일한 결과를 볼 수 있습니다.

결론

계산된 속성은 몇 가지 간단한 상태를 얻는 데 좋습니다. 주어진 상태에서 상태를 파생해야 하는 경우 mapGetters 메서드와 함께 getter를 사용하여 해당 상태를 계산된 속성에 매핑해야 합니다.