Vuex 스토어 및 타이프 스크립트

Vuex 스토어 및 타이프 스크립트

vuex 스토어에 접속하기 위해 선택한 방법과 문제가 발생할 수 있는지 궁금합니다.

현재 작업 중인 vuex 프로젝트가 있으며 VS-Code로 되어 있는데, 이 프로젝트를 통해 스토어에 액세스하면this.$store의 종류를 나타냅니다.any대부분의 아이템에 대해서

예.

@Component
export default class Foo extends Vue {
  get bar(){
  return this.$store.state.bar
  }
  set bar(){
    this.$store.commit("setBar", value);
  }
}

그러나 스토어를 Import하면 모든 것에 대해 올바른 입력이 표시됩니다.

예.

import store from "@/store";
@Component
export default class Foo extends Vue {
  get bar(){
  return store.state.bar
  }
  set bar(){
    store.commit("setBar", value);
  }
}

스토어가 예상대로 수정되었으며 변경된 값은 다음을 사용하여 다른 페이지에서 사용할 수 있는지 테스트하고 확인했습니다.this.$store·이렇게 가게에 접속해도 단점은 없을 것 같고, 사용하고 싶은 화살표 기능에 쉽게 액세스 할 수 있는 장점이 있습니다.내가 뭘 놓친거야?

간단히 말하면, 네, 이건 효과가 있어요.Import된 것storeinstance는 와 같은 인스턴스입니다.this.$store컴포넌트에 추가해 주세요.

사용법에 차이가 있습니다.구성 요소의 보기 부분은 구성 요소 범위 내의 변수만 볼 수 있고 전역 변수는 볼 수 없습니다.따라서 첫 번째 경우에는 컴포넌트 뷰의 바를 다음과 같이 참조할 수 있습니다.$store.state.bar두 번째 예에서는 예시와 같이 bar의 getter를 작성해야 합니다.

첫 번째 접근법은 보다 전통적인 접근법이며, 따라서 권장되는 접근법입니다.

IDE에서 유형 추론이 작동하지 않는 이유는 다른 질문입니다.여기에는 여러 가지 이유가 있을 수 있습니다.

• 가장 확실한 것은:VS Code의 타입 추론, 또는 Vetur Plugin이 불완전하다고 하는 것이 좋습니다.Web Storm을 사용해 보는 것이 좋을지도 모릅니다만, 이 점이 제 의견으로는 조금 더 좋은 것 같습니다.
• 의 유형을 추론하는 것은 얼마나 어려운가?bar? 유형을 명시적으로 명시하고 있습니까?스토어 상태의 인터페이스를 정의합니까?

TypeScript 를 최대한 활용하려면 , 가능한 한 타입을 명확하게 해 주세요.예를 들어 이 Vuex 스토어에서는 다음과 같은 막대의 유형을 추측하기 어렵습니다.

export default new Vuex.Store({
  state: () => ({
    bar: null
  }),
  mutations: {
    setBar: function(state, bar) {
      state.bar = bar;
    }
  }
})

한편, 이것은 매우 명확합니다.

interface State {
  bar: Bar | null;
}

export default new Vuex.Store<State>({
  state: (): State => ({
    bar: null
  }),
  mutations: {
    setBar: function(state: State, bar: Bar) {
      state.bar = bar;
    }
  }
})

Vuex 저장소를 올바르게 입력하는 방법에 대한 자세한 내용은 여기를 참조하십시오.

https://www.codeproject.com/Tips/5295301/Correctly-Typing-Vuex-with-TypeScript

언급URL : https://stackoverflow.com/questions/66667241/vuex-store-and-typescript