vuex에서 getter의 특별한 용도는 무엇입니까?

vuex에서 getter의 특별한 용도는 무엇입니까?

Vuex를 공부한 지 2주나 됐어요.나는 단지 의 특별한 기능이나 용도가 무엇인지 궁금할 뿐이다.getters

아래 코드를 사용해 보니 정상적으로 동작하고 있습니다.

this.$store.getters["app/url"]

하지만 같은 방법으로 동일한 값을 얻을 수 있습니다.state

this.$store.state.app.url

그냥 물어보는 거예요.getters다음과 같은 설정이 필요합니다.이것에 의해, 코드의 길이가 길어집니다.이것만으로 값을 얻을 수 있는 경우입니다.state.

const getters = {
    url: state => state.url 
};

getter가 스테이트를 사용하는 것보다 유리한 상황이 세 가지 있다고 생각합니다.

• 무엇보다도, getter는 내부 데이터가 내부 상태에 저장되어 있는 형식보다 더 나은 형식으로 내부 데이터를 반환할 수 있습니다.이러한 처리를 Vuex 스토어로 이동함으로써 컴포넌트를 청결하게 유지할 수 있습니다.예를 들어 다음과 같은 것이 있습니다.

// Normally we probably use setters here, but this is an example...
const state = {
  values: {
    2014: 1000,
    2015: 2000,
    2016: 3000,
    2017: 4000,
    2018: 5000,
    2019: 6000,
    2020: 7000
  },
  startYear: 2016,
  endYear: 2019
}

const getters = {
  // Returns something like [3000, 4000, 5000, 6000]
  currentValues (state) {
    const years = Object.keys(state.values);
    years.sort();

    return years
      .filter(year => year >= state.startYear && year <= state.endYear)
      .map(year => state.values[year]);
  }
}

• 데이터 자체보다는 데이터 복사본을 훨씬 쉽게 반환할 수 있으므로 돌연변이를 사용하지 않고 실수로 저장소를 수정하는 것을 방지할 수 있습니다.lodash deepClone 또는Object.assign얕은 개체의 경우 저장소에서 아무 작업 없이 구성 요소에서 자유롭게 수정할 수 있는 복사본을 만들 수 있습니다.

const state = {
  values: {
    2014: 1000,
    2015: 2000,
    2016: 3000,
    2017: 4000,
    2018: 5000,
    2019: 6000,
    2020: 7000
  },
}

// In your component
const values = this.$store.state.values;
values[2021] = 8000;
// Wait, why is my store suddenly modified?!

// Instead, use a getter

import { cloneDeep } from 'lodash-es';

const getters = {
  values (state) {
    return cloneDeep(state.values);
  }
}

// In your component you can add 2021 without modifying the state and causing all kind of unintended/hard-to-debug side effects

• Getters를 사용하면 Vuex 스토어의 내부 상태를 Vuex 스토어를 사용하는 컴포넌트에서 분리할 수 있습니다.기본적으로 컴포넌트와 Vuex 스토어 사이에 계약이 작성되므로 스토어와 컴포넌트를 동시에 조작하지 않고도 Vuex 스토어의 내부 구조를 변경하거나 컴포넌트를 변경할 수 있습니다.이를 통해 코드 중 일부를 리팩터링할 수 있습니다.초기 getter 설정에는 보일러 플레이트가 몇 개 있습니다만, 이러한 getter를 생성하는 도우미 기능을 작성할 수도 있습니다.어떤 이유로 getter를 상태를 반환하는 것보다 더 복잡하게 만들어야 하는 경우 자동 생성된 getter에서 getter를 삭제하고 자체 구현을 작성할 수 있습니다.그렇지 않으면 내부 상태가 사용된 모든 곳을 추적해야 합니다.

function generateGetters(keys) {
  return keys.reduce((acc, key) => {
    acc[key] = (state) => state[key];

    return acc;
  }, {});
}

const getters = {
  ...generateGetters(['values', 'url', 'someOtherKey'])
}

getters상태로부터 데이터를 취득할 때 로직을 적용할 때 사용됩니다.Vuex document에 의해 설명됩니다.

이러한 속성은 상점의 계산된 속성이라고 생각할 수 있습니다.

예를 들어, 상태에 다음과 같은 항목이 배열되어 있다고 가정합니다.

items = [
    {
        name: "Keyboard",
        price: 100
    },
    {
        name: "Mouse",
        price: 50
    },
    {
        name: "Monitor",
        price: 500
    },
    {
        name: "PC",
        price: 1500
    },
    {
        name: "Headset",
        price: 80
    }
]

그리고 250개 이상의 주(州)의 품목 목록을 가져오고 싶다면, 당신은 다음을 할 수 있습니다.

getExpensiveItems(state) {
    return state.items.filter(i => i.price > 250);
}

Vuex getter에 대한 자세한 내용은 여기를 참조하십시오.

경우에 따라서는, 스토어 상태에 근거해 파생 상태를 계산할 필요가 있습니다.예를 들어, 아이템의 리스트를 필터링 해 카운트 합니다.

computed: {
 doneTodosCount () {
   return this.$store.state.todos.filter(todo => todo.done).length
 }
}

둘 이상의 컴포넌트가 이 기능을 사용할 필요가 있는 경우 기능을 복제하거나 공유 도우미로 추출하여 여러 곳에 Import해야 합니다.둘 다 이상적이지 않습니다.

Vuex를 사용하면 스토어에서 "getters"를 정의할 수 있습니다.이러한 속성은 상점의 계산된 속성이라고 생각할 수 있습니다.계산된 속성과 마찬가지로 getter의 결과는 종속성에 따라 캐시되며 종속성의 일부가 변경된 경우에만 재평가됩니다.

언급URL : https://stackoverflow.com/questions/63762473/what-is-the-special-use-of-getters-in-vuex