我想弄清楚如何在 vue 3 typescript 專案中鍵入 vuex 模塊。這方面缺乏官方檔案。
假設我有一個這樣的專案：
import { createStore, useStore as baseUseStore, Store } from 'vuex';
import { InjectionKey } from 'vue';
interface FruitState {
apple: boolean,
peach: boolean,
plum: boolean
}
const FruitModule = {
namespaced: true,
state: (): FruitState => ({
apple: true,
peach: false,
plum: true
}),
mutations: {},
action: {}
}
export interface State {
foo: string;
}
export const key: InjectionKey<Store<State>> = Symbol();
export const store = createStore<State>({
modules: {
fruit: fruitModule
},
state: {foo: 'foo'},
mutations: {
changeFoo(state: State, payload: string){
state.foo = payload
}
},
actions: {
setFooToBar({commit}){
commit('changeFoo', 'bar')
}}
})
export function useStoreTyped() {
return baseUseStore(key);
}
...然后在一個組件中：
const apple = computed(() => store.state.fruit.apple);
當我嘗試訪問蘋果時它不起作用，因為它會引發錯誤
Property 'fruit' does not exist on type 'State'
現在如果我做這樣的事情：
import { createStore, useStore as baseUseStore, Store } from 'vuex';
import { InjectionKey } from 'vue';
interface FruitState {
apple: boolean,
peach: boolean,
plum: boolean
}
const FruitModule = {
namespaced: true,
state: (): FruitState => ({
apple: true,
peach: false,
plum: true,
}),
mutations: {},
action: {}
}
export interface State {
foo: string;
fruit?: FruitState;
}
export const key: InjectionKey<Store<State>> = Symbol();
export const store = createStore<State>({
modules: {
fruit: fruitModule
},
state: {foo: 'foo'},
mutations: {
changeFoo(state: State, payload: string){
state.foo = payload
}
},
actions: {
setFooToBar({commit}){
commit('changeFoo', 'bar')
}}
})
export function useStoreTyped() {
return baseUseStore(key);
}
再試一次，錯誤變為Object is possibly 'undefined'
如果我使用可選鏈接，它將允許我訪問水果模塊?.
如在 const apple = computed(() => store.state.fruit?.apple);
但這對我來說似乎不可接受，因為我知道 fruit.apple 實際上不是未定義的。
在 vuex 的狀態型別中包含模塊的正確方法是什么？
uj5u.com熱心網友回復：
您不需要在界面中將fruit狀態設為可選：State
export interface State {
foo: string;
//fruit?: FruitState;
fruit: FruitState;
}
根據您的評論，您在宣告根狀態時試圖繞過此 TypeScript 錯誤（如此處所示）：
export const store = createStore<State>({
modules: {
fruit: fruitModule
},
state: { foo: 'foo' }, // ? Property 'fruit' is missing in type '{ foo: string; }' but required in type 'State'.
})
使用型別斷言作為解決方法：
export const store = createStore<State>({
modules: {
fruit: fruitModule
},
state: { foo: 'foo' } as State, // ?
})
演示
轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/428555.html
標籤：javascript 打字稿 Vue.js Vuex Vuejs3
上一篇：具有深度的遞回部分