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

Question

我用 Typescript 创建了一个新的 VueJS 3 项目。此外，我添加了 Vuex 4 作为我的商店。但是我不知道我在将商店导入我的 Vue 组件时做错了什么。

目前我在浏览器的控制台中收到一个错误： 未捕获（承诺）TypeError：无法读取属性 '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
  }
}

Answer 1

问题是您将组合 API 与选项 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>

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

How to use Vuex in Vue3 Component with Typescript

typescript

vuex

vuejs3

vue-composition-api

vuex4