Vue中保存公用数据的五种方法·store·Vuex适合大型应用而其他方法则适合小型或简单应用

作者：机器人技术佬 | 发布时间：2025-07-07 |

Vue中保存公用数据的五种方法

一、Vuex状态管理

Vuex是Vue.js的一个用于状态管理的库，非常适合大型应用。它通过一个中央存储来管理所有组件的状态，使得状态更加可控和易于调试。

步骤 操作
安装Vuex npm install vuex --save
创建store import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const store = new Vuex.Store({ state: { count: 0 } });
在Vue实例中引入store new Vue({ store }).$mount('#app');
在组件中使用Vuex {{ this.$store.state.count }}

二、provide/inject机制

这个机制允许祖先组件向后代组件注入依赖，适合简单应用中的数据共享。

步骤 操作
在父组件中提供数据 provide: 'data', data() { return { message: 'Hello' }; }
在子组件中注入数据 inject: ['data'], created() { console.log(this.data.message); }

三、全局事件总线

全局事件总线适合中小型应用中的组件通信和数据共享。

步骤 操作
创建事件总线 const EventBus = new Vue();
在组件中使用事件总线 EventBus.$emit('message', 'Hello World');

四、本地存储（localStorage/sessionStorage）

本地存储适合需要持久化的数据。

步骤 操作
保存数据到本地存储 localStorage.setItem('key', 'value');
从本地存储读取数据 localStorage.getItem('key');

五、在根实例上挂载全局变量

这是一种简单的方法，适用于非常简单的应用。

步骤 操作
在根实例上定义全局变量 new Vue({ data: { globalData: 'Hello' } }).$mount('#app');
在组件中访问全局变量 {{ this.globalData }}

在Vue中保存公用数据有多种方法，选择哪种取决于应用的复杂度和需求。Vuex适合大型应用，而其他方法则适合小型或简单应用。