日常开发记录

1. vue2 一个modules的actions里怎么拿到另一个module的state

在模块的 actions 中，我们可以通过第二个参数的 rootState 来访问根状态，从而获取其他模块的状态。

//user.js
const user = {
  namespaced: true,
  state: {
    userInfo: {
      id: 1,
      name: 'John'
    }
  }
}

//cart.js
const cart = {
  namespaced: true,
  state: {
    items: []
  },
  actions: {
    // 在购物车模块中访问用户模块的状态
    async checkoutCart({ rootState }) {
      // 获取用户模块的状态
      const userId = rootState.user.userInfo.id
      
      // 使用用户ID处理购物车结算逻辑
      console.log(`用户 ${userId} 正在结算购物车`)
    }
  }
}

可以通过 rootState.模块名.状态属性 的方式访问其他模块的状态

2. ::before的层级没有父元素层级高

实现效果：

.stat-title {
					font-weight: bold;
					font-size: 32rpx;
					color: #333333;
					line-height: 16rpx;

					&::before {
						content: '';
						position: absolute;
						bottom: 28rpx;
						left: 21rpx;
						width: 130rpx;
						height: 10rpx;
						z-index: -1;
						background: #2DB7A0;
						border-radius: 0rpx 0rpx 0rpx 0rpx;
					}
				}

z-index: -1是关键

3. css外边距折叠问题

3.1 问题

<template>
  <div class="todo-list">
    <div class="todo-item" v-for="(item, index) in todos" :key="index">
      <div class="todo-name">{{ item.name }}</div>
      <div class="todo-count">{{ item.count }}</div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      todos: [
        { name: '学习 Vue.js', count: 1 },
        { name: '完成作业', count: 2 },
        { name: '阅读书籍', count: 3 }
      ]
    };
  }
}
</script>

<style scoped>
.todo-list {
  padding: 0 30px;
}

.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 30px 0;
  margin-bottom: 20px;
  box-shadow: 0px 0px 6px 1px rgba(0, 0, 0, 0.08);
  border-radius: 10px;
}

.todo-name {
  font-size: 28px;
  color: #333;
}

.todo-count {
  font-size: 28px;
  color: #666;
  background: #f5f5f5;
  padding: 4px 20px;
  border-radius: 20px;
}
</style>

有问题的页面的

实际上子容器的高度比父容器的高度多了一个todo-item的margin-bottom。
外边距折叠（Margin Collapse）是 CSS 中一个常见的现象，主要发生在块级元素之间的垂直外边距（margin）上。它会导致一些意想不到的布局问题。以下是外边距折叠可能导致的一些问题及示例：

1. 元素间距不如预期
   当两个相邻的块级元素都有外边距时，它们的外边距可能会合并为一个外边距，而不是简单地相加。这可能导致元素之间的间距小于预期。

<div class="box1"></div>
<div class="box2"></div>
.box1 {
  height: 100px;
  background-color: red;
  margin-bottom: 50px; /* 外边距 */
}

.box2 {
  height: 100px;
  background-color: blue;
  margin-top: 30px; /* 外边距 */
}

预期效果：box1 和 box2 之间的间距应该是 50px + 30px = 80px，总高度280px。
实际效果：由于外边距折叠，box1 和 box2 之间的间距实际上是 50px，即取较大的外边距，总高度250px。
2. 父元素高度计算错误
当子元素的外边距与父元素的外边距重叠时，父元素的高度可能会计算错误，导致父元素的高度为零或小于预期。
示例：

<div class="parent">
  <div class="child"></div>
</div>
.parent {
  background-color: lightgray;
}

.child {
  height: 100px;
  margin-top: 50px; /* 外边距 */
}

期效果：parent 的高度应该是 100px + 50px。
实际效果：由于 child 的外边距与 parent 的外边距重叠，parent 的高度可能会被计算为 0，导致它看起来没有高度，暂时是100px。

3.2 解决

1. 添加内边距：在父元素中添加内边距（padding），可以防止外边距折叠。

2. 使用边框：为父元素添加边框，边框也可以防止外边距折叠。

3. 使用伪元素：在父元素中添加一个伪元素（如 ::after），可以防止外边距折叠。

.parent {
  padding: 1px; /* 添加内边距 */
}

或则：

.parent {
  border: 1px solid transparent; /* 添加透明边框 */
}

或者：

.parent::after {
  content: '';
  display: block;
  height: 0; /* 或者设置为 1px */
}