

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

# 質問

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

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

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

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

[code]

    <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>
    
[/code]

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


CC BY-SA 4.0
2020-02-28T10:32:43.470
63436
2020-02-28T11:59:14.313
2020-02-28T11:59:14.313
3060
29986
question
javascript vue.js typescript
Vuex & Typescript で this.$store を参照できない