Vue+Typescript记账本坑位点整理

记账本，一种记录家庭开支的工具，对于了解家庭财务状况和优化家庭开支有很大帮助。随着科技的进步，记账本也从传统的纸质记账本发展到如今的电子记账本。

以 Vue 为技术栈，加上Typescript的支持，我开发了纱卡记账本，一个支持多类别账目记录的电子记账本。在这过程中，我遇到了一些坑，将其记录下来，分享给大家。

1. Vuex的模块化使用

Vuex 是一个状态管理库，可以方便地管理组件的状态。在 Vuex 中，我们可以将状态分为不同的模块，每个模块都有自己的状态和操作。

在使用 Vuex 时，我遇到过一个坑。在使用模块化时，如果在根模块中引用了其他模块的状态，则需要使用 mapState 函数。这是因为，在模块化使用 Vuex 时，每个模块的状态都是独立的，根模块无法直接访问其他模块的状态。

// 根模块
const store = new Vuex.Store({
  state: {
    count: 0,
  },
  getters: {
    doubleCount: state => state.count * 2,
  },
  mutations: {
    increment: state => state.count++,
  },
  modules: {
    // 子模块
    counter: {
      state: {
        count: 1,
      },
      getters: {
        tripleCount: state => state.count * 3,
      },
      mutations: {
        increment: state => state.count++,
      },
    },
  },
});

// 组件
const App = {
  template: `<div>{{ doubleCount }} {{ tripleCount }}</div>`,
  computed: {
    // 使用 mapState 函数访问子模块的状态
    ...mapState({
      doubleCount: state => state.count * 2,
      tripleCount: state => state.counter.count * 3,
    }),
  },
};

2. VueRouter的动态路由

VueRouter 是一个路由库，可以方便地管理页面的跳转。在 VueRouter 中，我们可以使用动态路由来实现根据不同的参数跳转到不同的页面。

在使用 VueRouter 时，我遇到过一个坑。在使用动态路由时，如果在路由中使用了可选参数，则需要使用 props 函数来接收参数。这是因为，在动态路由中，可选参数不是必须的，所以需要使用 props 函数来接收参数。

// 路由配置
const routes = [
  {
    path: '/user/:id',
    component: User,
    props: true,
  },
];

// 组件
const User = {
  props: ['id'],
  template: `<div>{{ id }}</div>`,
};

3. Typescript的类型别名

Typescript 是一个强类型的语言，在 Typescript 中，我们可以使用类型别名来定义新的类型。类型别名可以让我们更方便地使用类型，并且可以提高代码的可读性。

在使用 Typescript 时，我遇到过一个坑。在使用类型别名时，如果类型别名使用了泛型，则需要使用 interface 来定义类型别名。这是因为，在 Typescript 中，泛型类型别名只能使用 interface 关键字来定义。

// 类型别名
type User = {
  id: number;
  name: string;
};

// 泛型类型别名
interface User<T> {
  id: T;
  name: string;
}

4. ECharts的配置项

ECharts 是一个数据可视化库，可以方便地创建各种各样的图表。在 ECharts 中，我们可以通过配置项来设置图表的外观和行为。

在使用 ECharts 时，我遇到过一个坑。在配置图表时，如果配置项的名称错误，则 ECharts 会抛出一个错误。这是因为，ECharts 中的配置项都是严格定义的，如果配置项的名称错误，则 ECharts 无法识别该配置项。

// 错误的配置项名称
const option = {
  title: {
    text: '错误的标题',
  },
  xAxis: {
    type: 'category',
    data: ['错误的数据'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      data: [100],
    },
  ],
};

// 正确的配置项名称
const option = {
  title: {
    text: '正确的标题',
  },
  xAxis: {
    type: 'category',
    data: ['正确的数据'],
  },
  yAxis: {
    type: 'value',
  },
  series: [
    {
      type: 'bar',
      data: [100],
    },
  ],
};

5. scss的嵌套规则

scss 是一个 CSS 预处理器，可以在 scss 中使用嵌套规则来组织 CSS 代码。嵌套规则可以使 CSS 代码更易于阅读和维护。

在使用 scss 时，我遇到过一个坑。在使用嵌套规则时，如果嵌套规则的缩进错误，则 scss 会抛出一个错误。这是因为，在 scss 中，嵌套规则的缩进是严格定义的，如果缩进错误，则 scss 无法识别该嵌套规则。

// 错误的缩进
.parent {
  color: red;
  .child {
    color: blue;
  }
}

// 正确的缩进
.parent {
  color: red;
  .child {
    color: blue;
  }
}

结语

以上是我在开发纱卡记账本项目中遇到的坑。希望这些经验能够帮助大家避免在开发中遇到同样的问题。