使用 vuex 时如何在 typescript 语法中使用 mapState 函数？

Posted 2023-02-22

【中文标题】使用 vuex 时如何在 typescript 语法中使用 mapState 函数？

【英文标题】：How to use mapState function in typescript syntax when using vuex?

【发布时间】：2019-01-03 04:20:00

【问题描述】：

我在与 vuex 集成的 vuejs 项目中使用 typescript 语法。 我想使用在我的 .ts 文件中计算的 mapState 方法，但出现语法错误。 目前我正在使用文档建议的计算函数语法，我的意思是：

 get counter() 
   return  this.$store.state.count;
 

如果您阅读 Vuex 文档，您会发现以这种方式使用 Vuex 而不是使用mapState 是非常重复的。在大型应用程序中使用mapState 非常简单且有用。我想在我的 Typescript 组件中使用mapState，但我不知道正确的方法。我尝试了下面的方法来使用mapState 函数，但没有成功。

get mapState(
  counter:count
);

// or

get mapState(['name', 'age', 'job'])

如果有人可以帮助我，我将不胜感激。

【参考方案1】：

你可以在组件注解中调用 mapState：

import  Component, Vue  from 'vue-property-decorator';
import  mapState  from 'vuex';

@Component(
  // omit the namespace argument ('myModule') if you are not using namespaced modules
  computed: mapState('myModule', [ 
    'count',
  ]),
)
export default class MyComponent extends Vue 
  public count!: number; // is assigned via mapState

您也可以使用 mapState 根据您的状态创建新的计算：

import  Component, Vue  from 'vue-property-decorator';
import  mapState  from 'vuex';
import  IMyModuleState  from '@/store/state';

@Component(
  computed: mapState('myModule', 
    // assuming IMyModuleState.items
    countWhereActive: (state: IMyModuleState) => state.items.filter(i => i.active).length,
  ),
)
export default class MyComponent extends Vue 
  public countWhereActive!: number; // is assigned via mapState

【讨论】：

但是如何使用组件注解来调用多个模块，例如，mapState？您定义的变量称为“计算”是否重要？

@belvederef 只需多次调用它 ``` @Component( // 如果您不使用命名空间模块，请忽略命名空间参数 ('myModule')： ...mapState('myModule) ', ['count',]), ...mapState('anotherModule', ['count',]), )

【参考方案2】：

更容易使用 JS Spread syntax:

<template>
  <div class="hello">
    <h2> custom </h2>
    </div>
</template>

<script lang="ts">
import  Component, Prop, Vue  from 'vue-property-decorator';
import  mapState  from 'vuex';

@Component(
  computed: 
    ...mapState(
      title: 'stuff'
    ),
    // other stuff
  ,
)
export default class HelloWorld extends Vue 

  title!: string;

  public get custom():string 
    return this.title;
  

</script>

您的商店：

import Vue from 'vue';
import Vuex from 'vuex';

Vue.use(Vuex);

export default new Vuex.Store(
  state: 
    stuff: 'some title',
  ,
  mutations: 

  ,
  actions: 

  ,
);