使用 Typescript 访问 Vue3 中的商店

Question

我正在使用 TypeScript 构建一个 Vue3 应用程序，使用 Vuex 来存储某些数据。但是，我无法访问我的主要 App.vue 或其他一般组件的脚本标记中的 $store。

我的 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 的基本知识。提前致谢！

Answer 1

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官方网站以获得更好的参考。

使用 Typescript 访问 Vue3 中的商店

Accessing store in Vue3 using Typescript

typescript

vue.js

vuex