Typescript를 사용하여 Vue3 스토어 액세스

Typescript를 사용하여 Vue3 스토어 액세스

특정 데이터를 저장하기 위해 Vuex를 사용하여 TypeScript를 사용하여 Vue3 앱을 구축하고 있습니다.단, 접속할 수 없습니다.$store기본 App.vue 또는 기타 컴포넌트의 스크립트 태그에 포함되어 있습니다.

Vuex 스토어는 다음과 같습니다.

export default createStore({
  state: {
    members: [
      { id: 1, name: "Alice", role: "admin", email: "abc@example.com" }
    ] as Member[],
    size: 5
  },
  mutations: {
    addMember(state, member: Member): void {
      state.members.push(member);
    }
  },
  getters: {
    membersList(state) {
      return state.members;
    },
  }
})

App.vue 파일의 스크립트 태그:

<script lang="ts">
import { defineComponent } from "vue";
//import MemberCard from "./components/MemberCard.vue";
export default defineComponent({
  name: "App",
  components: {
   // MemberCard
  },
  data() {
    return {
      
    };
  },
  computed:{
    func(){
      return this.$store.getters.membersList;
    }
  }
});
</script>

Vue3와 TypeScript의 요령은 아직 배우고 있습니다.잘 부탁드립니다!

Vuex 파일

export default createStore({
  state: {
    members: [
      { id: 1, name: "Alice", role: "admin", email: "abc@example.com" }
    ]
  },
  getters: {
    getMembers: ({ members }) => members,
  },
})

템플릿 파일

<script lang="ts">
import { useStore } from "vuex";
import { onMounted } from "vue";
export default {
  setup(){
     const store = useStore();
     onMounted(() => {
      console.log(store.getters.members);
    });
  },
};
</script>

이 코드들을 확인해 주세요, 잘 되길 바랍니다.vue3 공식 사이트도 참고하시기 바랍니다.

언급URL : https://stackoverflow.com/questions/70999929/accessing-store-in-vue3-using-typescript