import Vue from 'vue';
import Vuex from 'vuex';
Vue.use(Vuex);
// 定义State接口
interface State {
count: number;
}
// 定义Mutations接口
interface Mutations {
INCREMENT(state: State, payload: number): void;
}
// 定义Actions接口
interface Actions {
increment(context: any, payload: number): void;
}
// 定义Getters接口
interface Getters {
doubleCount(state: State): number;
}
// 创建并导出Vuex.Store实例
const store = new Vuex.Store<State>({
state: {
count: 0,
},
mutations: {
INCREMENT(state, payload) {
state.count += payload;
},
} as Mutations,
actions: {
increment({ commit }, payload) {
commit('INCREMENT', payload);
},
} as Actions,
getters: {
doubleCount(state) {
return state.count * 2;
},
} as Getters,
});
export default store;这段代码定义了一个简单的Vuex store，包含state、mutations、actions和getters。它使用TypeScript接口来规定状态、变化方式和业务逻辑的方法签名，使得代码更加清晰和类型安全。在实际开发中，可以根据项目需求进一步扩展store的功能。