typescript defineStore函数
时间: 2024-01-01 09:05:46 浏览: 28
`defineStore` 是 Vuex 4.x 中的一个实用函数,用于快速创建一个 Vuex store 模块。在 TypeScript 中,我们可以使用 `defineStore` 函数来定义一个强类型的 Vuex store 模块。
`defineStore` 函数的签名如下:
```typescript
import { defineStore } from 'vuex';
const store = defineStore({
state: () => ({
count: 0,
}),
getters: {
double(state) {
return state.count * 2;
},
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
},
},
});
```
其中,`defineStore` 函数接收一个对象作为参数,该对象包含 state、getters、mutations 和 actions 四个属性,分别用于定义 Vuex store 模块的状态、计算属性、变更方法和异步操作。
在 TypeScript 中,我们可以使用泛型来指定 state 类型:
```typescript
interface State {
count: number;
}
const store = defineStore<State>({
state: () => ({
count: 0,
}),
getters: {
double(state) {
return state.count * 2;
},
},
mutations: {
increment(state) {
state.count++;
},
},
actions: {
asyncIncrement({ commit }) {
setTimeout(() => {
commit('increment');
}, 1000);
},
},
});
```
这样,在使用 state 属性时,就可以获得正确的类型推断:
```typescript
store.state.count // 类型为 number
```