vuex를 사용할 때 typescript 구문에서 mapState 함수를 사용하는 방법

vuex를 사용할 때 typescript 구문에서 mapState 함수를 사용하는 방법

vuex와 통합된 vuejs 프로젝트에서 typescript 구문을 사용하고 있습니다..ts 파일에서 계산한 대로 mapState 메서드를 사용하고 싶은데 구문 오류가 발생했습니다.현재 계산된 함수에 대해 docs 권장 구문을 사용하고 있습니다.즉, 다음과 같습니다.

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

Vuex 문서를 읽으면 Vuex를 사용하는 대신mapState매우 반복적입니다.사용.mapState는 대규모 어플리케이션에서 매우 쉽고 편리합니다.사용하고 싶다mapState올바른 방법을 모르겠습니다.아래 방법을 사용해 보았습니다.mapState기능을 했지만 소용없었습니다.

get mapState({
  counter:count
});

// or

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

누가 좀 도와주면 고맙겠다.

컴포넌트 주석 내에서 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
}

JS 스프레드 구문을 보다 쉽게 사용할 수 있습니다.

<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: {

  },
});

언급URL : https://stackoverflow.com/questions/51534273/how-to-use-mapstate-function-in-typescript-syntax-when-using-vuex