Vuex 是一个 Vue 的 状态管理工具，帮我们管理 Vue 通用的数据 (多组件共享的数据),下面我们分析几种使用场景,看看Vuex是怎么使用的.
-
在同一个路由下,有多个组件,共用一个数据
组件关系简单,可以直接组件间传值解决,无需Vuex
组件数量多,关系不确定,直接无脑选Vuex
-
在不同路由下,共用一个来自服务端的数据
1. 将数据放在每个组件内加载时获取：
优点：
- 按需加载： 只有需要特定数据的组件才会请求数据，减少了不必要的网络请求。
- 更好的性能： 减少了应用初始化时的数据请求量，加快了应用的加载速度。
- 更好的控制： 每个组件都可以独立地管理数据的请求和更新，更容易实现组件的隔离和复用。
缺点：
- 重复请求： 如果多个组件需要相同的数据，可能会导致重复请求，浪费网络资源。
- 数据不一致： 不同组件可能在不同的时间点请求数据，导致数据的一致性难以维护。
2. 在一登录就获取并存储起来：
优点：
- 数据一致性： 所有组件都使用同一份数据，保证了数据的一致性。
- 性能优化： 减少了重复请求，提高了应用性能。
- 全局状态： 方便实现全局状态管理，可以在任何组件中访问这些数据。
缺点：
- 初始化时间较长： 如果全局数据较大，可能会延长应用的初始化时间。
- 可能加载不必要的数据： 如果某个组件只在特定情况下才需要某些全局数据，提前加载可能会浪费资源。
根据应用场景和性能需求，可以选择合适的策略。
通常，对于小型应用或者数据量不大的情况，将数据存储在登录后的全局状态中是一个方便的选择。
如果使用Vuex来存储,需要注意刷新机制,避免存储对象为空~
对于大型应用或者需要优化性能的情况，按需加载数据可能是更合适的选择。
- 如果在一开始就使用Vuex存储数据,需要对数据做持久化,与localStorage结合是个不错的办法
// store.js
import Vuex from 'vuex';
const store = new Vuex.Store({
state: {
globalData: JSON.parse(localStorage.getItem('globalData')) || null,
},
mutations: {
setGlobalData(state, data) {
state.globalData = data;
// 将数据保存到本地存储
localStorage.setItem('globalData', JSON.stringify(data));
},
},
actions: {
fetchData({ commit }) {
// 模拟从服务端获取数据
const data = { /* 从服务端获取的数据 */ };
commit('setGlobalData', data);
},
},
});
export default store;
