1

お世話になっております。
現在VuexTypescriptを使用してカウンターアプリを作成しています。

質問

Vuexのストアをthis.$storeで参照することができない。

  • this.$store → TS2339: Property '$store' does not exist on type
  • this['$store'] → 正常に動作する

this['$store']では正常に動作することから、storeは問題なく実装できていると考えてます。
また、increment()実行時のthisをダンプすると、$storeを持っていることは確認できてます。

実際のコードは下記の通りです。

<template>
  <div class="test">
    <span class="test__highlight">Cout:</span>{{ count }}
    <button @click="decrement">
      -
    </button>
    <button @click="increment">
      +
    </button>
  </div>
</template>

<style lang="scss" scoped></style>

<script lang="ts">
import { mapGetters } from 'vuex';

export default {
  computed: {
    ...mapGetters(['count']),
  },
  methods: {
    increment() {
      console.log(this.$store);
      // TS2339: Property '$store' does not exist on type '{ increment(): void; decrement(): void; }'

      // エラーは発生しない
      this['$store'].dispatch('increment');
    },
    decrement() {
      this['$store'].dispatch('decrement');
    },
  },
};
</script>

お力添えいただけますと幸いです。
よろしくお願いいたします。

0

この質問に回答するには、ログインする必要があります。

のタグが付いた他の質問を参照する。