계산된 속성 및 Vuex

계산된 속성 및 Vuex

Vuex에서 계산된 속성이 어떻게 작동하는지 잘 모르겠습니다.계산 게터를 사용하고 있습니다.

var selectDisplayValues = computed({
    get() {
        return store.getters['expense/getSelectDisplayValues'];
    }
});

저장소 데이터가 변경되면 계산 도구도 변경됩니다.아직까진 확실해요계산된 속성에 새 값을 할당하면 저장소 내부 값도 변경됩니다.부동산의 로컬 값뿐만 아니라왜 그렇죠?그러기 위해서는 계산 소품 내부에 세터가 필요하지 않을까요?

편집: 이렇게 새 값을 할당합니다.

selectDisplayValues.value[`inputData[${props.index}][${props.attribute}]`] = {placeholder_value: "Bitte wählen...", value: "", reassigned: false};

또한 옵션 값에 따라 변경하기 위해 선택 드롭다운에서 v-model을 사용하고 있습니다.

새 값이 할당되지 않았지만 기존 값이 변환되었습니다.

Getter 전용 계산 참조에 읽기 전용이 있습니다.value수정되지 않은 값을 포함하는 속성입니다.

ref 값을 완전히 읽기 전용으로 만들려면 이 작업을 명시적으로 수행해야 합니다.

const selectDisplayValues = readonly(toRef(store.getters, 'expense/getSelectDisplayValues'))

개인적으로 추천하고 싶은 것은mapGettersfrom vuex : 맵게터 도우미

저는 이렇게 일합니다.

vuex 스토어에서 getter를 취득합니다.

const store = createStore({
  state: {
    todos: [
      { id: 1, text: '...', done: true },
      { id: 2, text: '...', done: false }
    ]
  },
  getters: {
    doneTodos (state) {
      return state.todos.filter(todo => todo.done)
    }
  }
})

vue 컴포넌트에는 다음과 같은 것이 있습니다.

import { mapGetters } from 'vuex'

export default {
  // ...
  computed: {
    ...mapGetters({
      doneCount: 'doneTodosCount'
   })
  }
}

그런 다음 Getter에서 값에 액세스할 수 있습니다.this.doneCount

스토어가 변경되면 계산된 값이 자동으로 변경됩니다.

언급URL : https://stackoverflow.com/questions/70861410/computed-properties-and-vuex