如何在带有 Typescript 的 Vue3 组件中使用 Vuex答案

【问题标题】：How to use Vuex in Vue3 Component with Typescript如何在带有 Typescript 的 Vue3 组件中使用 Vuex
【发布时间】：2021-08-22 08:57:48
【问题描述】：

我使用 Typescript 创建了一个新的 VueJS 3 项目。此外，我添加了 Vuex 4 作为我的商店。但是我无法弄清楚将商店导入到我的 Vue 组件中我做错了什么。

目前，我在浏览器的控制台中收到错误消息： Uncaught (in promise) TypeError: Cannot read property 'parentNode' of null

我必须如何导入我的商店才能在我的组件中使用它？

// main.ts
import { createApp } from 'vue';
import App from './App.vue';
import { store, key } from "./store/store";

createApp(App)
    .use(store, key)
    .mount('#app')

// store.ts
import {InjectionKey} from "vue"
import {createStore, useStore as baseUseStore, Store} from "vuex"

export interface State {
    ...
}

export const key: InjectionKey<Store<State>> = Symbol()

export const store = createStore<State>({
    state: {
        someArray: [{...}]
    },
    mutations: {},
    getters: {
        getObjects: (state) => state.someArray
    }
})

export function useStore() {
    return baseUseStore(key)
}

// Component
<template>...</template>

<script lang="ts">
import {defineComponent} from "vue";
import {useStore} from "../store/store";

export default defineComponent({
  name: 'Comp',
  data() {
    return {
      store: null,
    }
  },
  computed: {
    something() {
      return this.store.getters.getObjects
    }
  },
  setup() {
    const store = useStore()
    return store
  }
}

【问题讨论】：

标签： typescript vuex vuejs3 vue-composition-api vuex4

【解决方案1】：

问题是您将 Composition API 与 Options API 混合在一起。您已经声明了自己的 store 数据属性，然后在 setup() 中，您通过返回它来重新声明 store。

要解决此问题，只需删除 data 和 computed 选项，并坚持使用 Composition API（只需使用 setup）：

<template>
  <div>{{ something }}</div>
</template>

<script lang="ts">
import { computed, defineComponent } from 'vue'
import { useStore } from '../store/store'

export default defineComponent({
  setup() {
    const store = useStore()
    return {
      something: computed(() => store.getters.getObjects)
    }
  }
})
</script>

【讨论】：