vue-cli3項目中 vuex 在 ts 文件沒有智能提示問題

遇到一個問題,花了一點時間解決。
vue-cli3項目中 vuex 在 ts 文件中部分提示消失問題;vue

//state.ts
export interface RootState {
  userInfo: Partial<userInfoType>;
  context: Partial<contextType>;
}
export const state: RootState = {
  userInfo: {},
  context: {}
};

//store/index.ts文件
import Vue from 'vue';
import Vuex, { StoreOptions } from 'vuex';
import { RootState, state } from './state';
import { actions } from './actions';
import { mutations } from './mutations';
import { getter } from './getter';
Vue.use(Vuex);
export function createStore() {
  return {
    actions,
    mutations,
    getter,
    state
  };
}

const storeOptions: StoreOptions<RootState> = createStore();
export default new Vuex.Store<RootState>(storeOptions);

//main.ts文件
import Vue from 'vue';
import App from './App.vue';
import router from '@RouterPath/index.ts';
import store from './store/index';
import 'lib-flexible';
Vue.config.productionTip = false;
new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');

//.vue 文件中使用的時候:
this.$store.commit //沒問題,提示正常
this.$store.dispatch //沒問題,提示正常
.....
//$store 上的屬性方法都沒得問題,一切正常

this.$store.state....  // 編輯器沒得智能提示了 ,ctrl+鼠標左鍵,看一下state的類型 ,發現提示 (property) Store<any>.state: any,發現本身指定的Store類型都失效了,都變成了any類型

//到這裏就很迷茫了,看一下 new Vue ({ store }) 中的類型,發現 store 爲 export default new Vuex.Store<RootState>(storeOptions),嘗試着 在 main.ts 裏面寫 store.state.context. 發現沒毛病啊,智能提示一切正常啊。

// 雖然總體上代碼運行沒得一點毛病,可是對於強迫症的患者來講,就很難受,使用 ts 不就是爲了數據檢測,智能提示麼。下面博主投機取巧如下,
//新建 store.d.ts文件

import Vue from 'vue';
import { Store } from 'vuex';
import { RootState } from '@/store/state';

declare module 'vue/types/vue' {
  interface Vue {
    $$store: Store<RootState>;
  }
}
//vue 原型上拓展 $$store屬性,並指定類型爲 Store<RootState>

//在main.ts 中 $$store 去複製 $store 的原型
const app = new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app');
Vue.prototype.$$store = app.$store; //原型的複製

//以後在.vue中使用this.$$store.state.... 智能提示就有了,
//在編輯器上 ctrl+鼠標左鍵,分別查詢下 this.$$store.state this.$$store.state.context
//1. (property) Store<RootState>.state: RootState 
//2.(property) RootState.context: Partial<context9>
相關文章
相關標籤/搜索