想请教一下，在Vue项目中，你们一般都是将服务端的字典值放在哪里？

Question

在Vue或React项目中经常会遇到比如下拉框的数据字典之类的，都是每次在使用的时候实时像服务端请求还是请求一次后将数据放在Vuex还是放在localStorage之类的地方的？如果字典值数据量比较大的话会不会对前端造成负担？

Answer 1

请问你是怎么解决的啊，我也遇到了

Answer 2

首先确定这个字典是不是动态生成的。比如有些要根据用户的属性生成的，那么就是动态的。动态的一般缓存于内存中，如变量或者Vuex都是内存形式的存储方式。如何选择要看这些字典的变动频率。比如，是根据时间变化生成的字典，又或者要求别人更新过之后立即获取最新字典，则可以实时获取（可以适当使用debounce来延缓），存于组件变量中。如果明确知道不同动作会引起字典变化的，比如用户更改自身信息后，导致字典变化的，可以将数据存在Vuex中，并在适当时机（用户改变信息时）去重新获取字典信息。如果使用了servicepush的方式（如WebSocket或WebPush），那么可以完全存于Vuex之类的内存数据库中，在更新时再去更新数据。需要注意的是，localStorage和sessionStorage的性能比较差，所以要尽量避免使用。可以使用CacheStorage、IndexedDB或者KVStorage去存储数据。静态字典就相对容易了。直接在代码中耦合进去就可以了。为了方便维护，可以在最终发布时通过接口获取最新字典并混入代码中。而静态代码可以通过各种缓存手段缓存任意长的时间。需要注意的是，网络IO开销有时并非决定性因素。当数据量非常庞大时，只能通过网络去获取数据。同时还要注意大列表（DOM节点）的渲染性能问题。

Answer 3

我建议登录之后请求一份存localStorage，本地存储对项目没有影响,一般情况下字典数据比较多，也不会频繁修改，如果界面有修改入口，不存在权限问题，要及时更新localStorage存储的字典，不对项目造成其他影响，至于退出删不删看你怎么做，不造成负面影响即可