javascript - 使用vuex时应该把哪些列入数据管理状态?

问题描述

问 题

由1.0迁入2.0时，组件件通信是通过一个单例来实现的。

https://vuefe.cn/v2/guide/mig...和-broadcast-替换

就是有一个单例的store【new Vue()】，然后通过给这个store on绑定事件 emit触发事件来实现组件间的事件通信。此时只需要组件带上一个简单的store.js文件即可

现在想引入vuex，发现如果把大多数状态封在state内其实很不友好，有一些过于简单的事件我并不想放在vuex中，更希望通过on emit的方式来触发。

但是这样不知道会不会不是最佳实践。

举个例子：
父组件A，里面有N个子组件B，子组件B在created的时候会触发A的事件，A就会自动把自己的宽度增长。

把上方这样的组件集的一些数据放入vuex的state感觉有些大材小用，还不如把组件A和B加上一个通过单例空Vue的store.js封装起来。

想知道一般实践过程中会把哪些放入vuex中

解决方案

能够直接通信的就直接通信好了，没问题的。如果一个数据涉及的组件对象之间的兄弟关系，或者一个数据在多于两个组件中使用，或者数据是业务核心数据，那就放到 store 里。

不确定你的业务场景。

我这里举个例子：

在线机票预订系统，乘机人信息会在增值业务购买、价格展示、在线支付等组件中使用，同时这个数据也是业务核心数据，因此就将乘机人数组放到 store 中，而乘机人组件是由一个包装父组件加 单个乘机人信息 的子组件列表构成，包装父组件和子组件之间就直接通过 props 传递单个乘机人数据，没必要再通过 store 传递。

这篇关于javascript - 使用vuex时应该把哪些列入数据管理状态?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！