vue-cli3项目中 vuex 在 ts 文件没有智能提示问题

  • A+
所属分类:Web前端
摘要

遇到一个问题,花了一点时间解决。
vue-cli3项目中 vuex 在 ts 文件中部分提示消失问题;

遇到一个问题,花了一点时间解决。
vue-cli3项目中 vuex 在 ts 文件中部分提示消失问题;

//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>