vue工程，有一个数组是axios后台得到的，多个组件都需要使用，应该如何存储这个数组？

Question

最好的解决办法就是用vuex了吗？为什么不能直接将store里面的值在data里面赋值，而必须在computed里面呢？

我每个组件都要用就每个组件都要有computed来接收这些store里面的数组。

有人能提供一个例子吗，谢谢

Answer 1

这个其实也要看场景的。

如果你后台取回来这个数组就不会变化了，相当于是个静态常量。
比如: ALL_ROLES = ['student', 'teacher']这样，那你完全可以存在localStorage里，要用的时候再去取，去之前没有的话就去服务器fetch一下，也是很ok的，唯一的缺点可能就是同步的I/O速度慢那么一点点点。

如果你这个数组是随时变化的，而且几个数组依赖的都是一个“活”的“单例”数据，那最好的肯定就是放在store里啦。写起来也灰常简单，依赖这个数组的组件每次created的时候dispatch一下fetch data的action，然后mapGetters映射到组件computed里就好了，伪代码：

// ExComponent.vue
import {mapGetters} from 'vuex'
created () {
    this.$store.dispatch('fetchArrData')
},
computed: {...mapGetters(['arr'])}

相当简洁，又爽，你不可能再找出更优雅的方式啦

Answer 2

1. vuex 就是为了解决各个组件之间使用 公共数据打造的；
2. 放 computed 里是为了可以响应变化，你也可以放在 data里；
   但是官方不支持：
   

Answer 3

你不能直接存到localStorage里？

Answer 4

vuex 了解一下

Answer 5

用vuet的mapRules完美解决这问题，作者开发这个就是为了飚车。

<template>
<div class="txt-left txt-b-info">你正在编辑：{{menuEdit.form.name}}</div>
</template>

import {mapModules, mapRules} from 'vuet'

export default {
    mapModules({
      menuEdit: 'sys-menu-edit',
      moduleNames: 'sys-module-names',
      menuNames: 'sys-menu-names',
      aclList: 'sys-acl-list'
    }),
    mapRules({need: 'sys-module-names', temp: 'sys-menu-edit', route: 'sys-acl-list'})
    
   // ...
}
    

Answer 6

vuex不就是用来干这个的吗