0

私はcliから最新のVueプロジェクトを持っています。vuex とストアで遊んでいます。

デフォルト プロジェクトには、この初期化があります。

import Vue from 'vue';
import App from './App.vue';
import router from './router';
import store from './store';
import './registerServiceWorker';

Vue.config.productionTip = false;

new Vue({
  router,
  store,
  render: (h) => h(App),
}).$mount('#app');

店内はこんな感じ。

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

Vue.use(Vuex);

export default new Vuex.Store({
  state: {
      stateName: 'STORE-NAME',

  },
  mutations: {

  },
  actions: {

  },
});

私のSFCは次のようになります。

<template>
  <div class="about">
    <h1>This is the Probate page</h1>
    <p>State Name: {{ localName }}</p>
  </div>
</template>

<script lang="ts">


    export default {

        data(){
            return {
                localName: 'COMPONENT-NAME',
            };
        },

        created(){
                        this.localName = this.$store.state.stateName;

        },
    };

</script>

「npm run serve」の実行時に発生するエラーは次のとおりです。

ERROR in /Users/*/Documents/projects/legalcove-single-page-app/src/views/Probate.vue
27:14 Property 'localName' does not exist on type '{ data(): { localName: string; }; created(): void; }'.
    26 | 
  > 27 |             this.localName = this.$store.state.stateName;
       |              ^
    28 | 
    29 |         },
    30 |     };
Version: typescript ERROR in /Users/*/Documents/projects/lc-single-page-app/src/views/Probate.vue3.1.1
, tslint 5.11.027:31
 Property '$store' does not exist on type '{ data(): { localName: string; }; created(): void; }'.
Time:   3011 ms
    26 | 
  > 27 |             this.localName = this.$store.state.stateName;
       |                               ^
    28 | 
    29 |         },

しかし、アプリの実行中にブラウザーでエラーが発生することはなく、期待どおりに動作します。画面にstateName値が表示されます。

4

0 に答える 0