typescript - 在 vue + typescript 中使用 mapState

问题描述

在远离 vue 多年后，我正在用 vue+vuex+typescript 编写应用程序。我明白了这些概念，但发生了很多变化！

我在尝试使用 vuexmapState辅助函数时遇到了一个奇怪的问题。我有一个名为的商店模块animationCanvas：

import { Module } from 'vuex'
import { RootState } from '../types'
import { AnimationCanvasState } from './types'

const state: AnimationCanvasState = {
  frames: [],
}

export const animationCanvas: Module<AnimationCanvasState, RootState> = {
  state,
}

我将它拉入我的根存储模块并注册它：

import { createStore, StoreOptions } from 'vuex'
import { RootState } from './types'
import { animationCanvas } from '@/store/modules/AnimationCanvas'

const store: StoreOptions<RootState> = {
  modules: {
    animationCanvas,
  },
}

当我使用直接从$store属性中提取的组件中的商店时，它可以正常工作：

import { Vue, Options } from 'vue-class-component';

@Options({
    name: 'Animation Canvas',
    computed: {
        frames() {
            return this.$store.state.animationCanvas.frames;
        },
    },
})
export default class AnimationCanvas extends Vue {
...

但是当我尝试通过mapState辅助函数添加它时，我什么也没得到：

import { Vue, Options } from 'vue-class-component';
import { mapState } from 'vuex';

@Options({
    name: 'Animation Canvas',
    computed: {
        ...mapState('animationCanvas', ['frames']),
    },
})
export default class AnimationCanvas extends Vue {

而且我知道该模块在那里并且命名正确，部分是因为它在$store样式路径中工作，但也因为我可以在开发工具中看到它：

我一直在寻找文档，但我无法弄清楚。有任何想法吗？

标签： typescriptvue.jsvuex

在您的代码中，我没有看到您已命名 Vuex 模块。我不知道打字稿的语法，但在普通的 JS 中你会这样做

const store = {
  modules: {
    animationCanvas: {
       namespaced: true,
       state: ...
    }
  }
}

您可以通过console.log(this.$store)在组件中执行并查看对象的结构来检查这一点。在你的吸气剂中，你应该有类似的东西：

getters: {
   'animationCanvas/frames': ...
}

typescript - 在 vue + typescript 中使用 mapState

问题描述

解决方案

推荐阅读