vue中store和bus哪个好用

在 Vue.js 中，有两种常用的状态管理方式：store 和 bus。

store 是 Vuex 的核心，提供了一种集中管理应用状态的方式。它的优点在于能够让你的组件之间的状态变化更加可预测和可追踪。如果你的应用比较复杂，或者希望在多个组件之间共享状态，那么使用 store 是很有必要的。

bus 是一种简单的状态管理方式，它将组件之间的通信转化为事件的发布和订阅。如果你的应用比较简单，或者只需要在父子组件之间传递数据，那么使用 bus 就可以解决问题。

一般来说,如果项目规模较大，多组件之间存在复杂的数据交互及组件状态共享,建议使用 Vuex,如果项目规模较小或简单，可以考虑使用 event bus.

相关问题

vue 跨页面传值bus

Vue.js 中的“Bus”通常是指Vuex或自定义事件总线机制，用于解决单向数据流（Single Responsibility Principle）框架下跨组件之间的通信问题，特别是在父组件需要与子组件或兄弟组件共享数据时。

1. **Vuex**：Vuex是一个专为 Vue.js 应用程序设计的状态管理模式，它允许你在应用中全局存储和管理数据。当你需要在多个组件之间传递信息时，可以将状态存储在 Vuex store 中，并通过 actions 和 getters 来读取和更新这个状态。这样，所有依赖该状态的组件都可以通过 `this.$store` 访问并监听变化。

2. **自定义事件总线（Event Bus）**：这是一种更简单的解决方案，如果不需要复杂的全局状态管理。你可以创建一个独立的 Vue 实例作为事件总线，发布和订阅事件来传递数据。例如，你可以创建一个名为 `appBus` 的 Vue 实例：

const appBus = new Vue();

然后在需要发送消息的地方：

appBus.$emit('message', { type: 'crossPageData', payload: data });

接收端则通过 `$on` 监听事件：

appBus.$on('message', (data) => {
  // 处理接收到的数据
});

Vue中如何选择页面跳转和传参的方式

在Vue.js中，有多种方式可以实现页面之间的跳转以及传递参数。以下是常用的一些方法：

1. **路由（Router）** - 使用官方推荐的Vue Router库。首先需要安装`vue-router`，然后在项目中设置路由配置文件（如`router/index.js`），通过`this.$router.push(path, query)`或`this.$router.go(to)`进行页面跳转。路径（path）用于指定目标组件，查询参数（query）则作为URL的一部分传递数据。

   // 跳转并传参
   this.$router.push({ name: 'targetPage', params: { id: 1 } });

2. **Vuex** - 如果参数状态需要在整个应用共享，可以考虑使用Vuex的状态管理。将参数存储在store中，然后在导航守卫`beforeRouteEnter`中获取和传递。

3. **事件总线（Event Bus）** - 当父子组件间通信不需要依赖于路由时，可以使用事件总线。创建一个自定义事件发射器，其他组件监听这个事件并在触发时携带参数。

4. **URLSearchParams** - 直接在URL中拼接查询字符串也是一种简单方式，例如 `window.location.search = '?key=value'`，然后解析查询字符串获取参数。

5. **Action-Callback模式** - 对于简单的操作，可以直接在组件内的`methods`里写函数，调用`this.$emit('route-to', data)`，然后在接收组件里监听这个事件并执行跳转。