Accessing store in Vue3 using Typescript

Question

I am building a Vue3 app using TypeScript using Vuex for storing certain data. However I am unable to access the $store in the script tag of my main App.vue or other components in general.

My vuex store looks somewhat like:

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

The script tag of my App.vue file:

<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>

I am still learning the ropes on Vue3 and TypeScript. Thanks in advance!

Answer 1

Vuex File

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

Template File

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

Please check these codes, i hope it will be worked. I also added, please check vue3 official site for better reference.