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>