pinia最佳实践与补充内容
面试题：在目前的 Vue 应用中，使用状态管理库进行状态管理时有哪些最佳实践？请列举一至两条
最佳实践
- 分离状态逻辑和业务逻辑
实际上这个就是我们使用状态管理库的目的，我们使用状态管理库，就是为了将组件的状态分离出来，这样可以方便我们维护，也方便组件之间进行状态的共享。
没有使用状态管理库：
使用状态管理库之后：
但是需要注意一点，并非所有的 Vue 应用都需要使用状态管理库，这个取决于我们所开发的应用的规模大小。如果只是小规模的 Vue 应用，使用状态管理库反而显得更麻烦。
- 选择 Pinia 来进行状态管理
目前 Vue 官方已经推荐开发者使用 Pinia 来替代 Vuex 作为状态管理库，你可以将 Pinia 看作是 Vuex5.x
相比 Vuex，Pinia 真的真的真的很轻量，大小只有 1kb 左右，基本上可以忽略
当然相比之前的 Vuex，还有一些其他的优点：
另外如果你之前的项目使用的是 Vuex，那么你可以看一下官方的迁移指南：
- 避免直接操作 store 的状态
虽然我们可以直接操作 store 的状态，但是在 Pinia 中我们最好还是避免直接操作 store 里面的状态，而是通过对应的 getters 来读取，actions 来修改
<!-- 计数器-->
<button class="btn" @click="num++">+</button>
// 待办事项
function addHandle() {
if (newItem.value) {
console.log(list.value.items);
// 直接操作 store 的状态
list.value.items.push({
text : newItem.value,
isCompleted: false,
});
newItem.value = "";
} else {
window.alert("请填写新增项目");
}
}
与其对应的应该使用 getters 和 actions 等 API 来处理状态的读取和修改
<button class="btn" @click="increment">+</button>
function addHandle() {
if (newItem.value) {
addItem(newItem.value);
newItem.value = "";
} else {
window.alert("请填写新增项目");
}
}
这样做的好处在于提高了代码的可维护性，应该数据的改变始终来自于 actions 的方法，而不是分散于组件的各个部分。
- 使用 TypeScript
Pinia 本身就是使用 typescript 编写的，因此我们在使用 pinia 的时候，能够非常方便的、非常自然的使用 typescript，使用 typescript 可以更好的提供类型检查和代码提示，让我们的代码更加可靠和易于维护。
官方文档对应：pinia.vuejs.org/zh/core-con…
- 将状态划分为多个模块
在一个大型应用中，如果将所有组件的状态放置在一个状态仓库中，那么会显得该状态仓库非常的臃肿。因此一般在大型项目中，是一定会将状态仓库进行拆分的。
在早期的 Vuex 中，就已经支持将状态仓库按照不同的功能模块进行拆分，只不过在 Vuex 时期，状态仓库拆分时按照的是嵌套的方式进行代码组织的。
在 Pinia 中，组织状态仓库的形式不再采用像 Vuex 一样的嵌套，而是采用的是扁平化的设计，每一个状态仓库都是独立的，这个其实也是 Pinia 这个名字的来源。
补充内容
- 辅助函数
- 订阅 state 以及 action
- 插件选项
真题解答
题目：在目前的 Vue 应用中，使用状态管理库进行状态管理时有哪些最佳实践？请列举一至两条
参考答案：
在使用 Vue 开发应用时，有关组件的状态管理这一块，有如下的最佳实践：
- 使用专门的状态仓库来管理组件状态，以达到状态逻辑和业务逻辑的分离
- 比起 Vuex，目前更推荐使用 Pinia 来管理仓库的状态
- 尽量都集中使用 actions 中的方法来操作 store 的状态，避免直接操作 store
- 使用 typescript 以便得到更好的类型提示
- 根据不同的功能模块来创建对应的独立的状态仓库
