0

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

目前，我在浏览器的控制台中收到错误： 未捕获（承诺中）TypeError：无法读取 null 的属性“parentNode”

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

// 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
  }
}
4

1 回答 1

1

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

要解决此问题，只需删除dataandcomputed选项，并坚持使用 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>
于 2021-06-06T02:12:27.857 回答