- A+
所属分类:Web前端
遇到一个问题,花了一点时间解决。
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>