Vue.js + Vuex + TypeScript 实战项目开发与项目优化

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的功能。