遇到一個問題,花了一點時間解決。
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>