vue.js - 我在哪里存储 vuejs 中的可共享数据？

Question

我正在构建一个包含各种页面的应用程序，当用户转到 /orgs 时，我有一个需要的模板

// routes.js
...
import Orgs from './components/Orgs.vue';
...

{
  path: '/orgs',
  component: Orgs,
  meta: { requiresAuth: true }
},

从这里开始，我在 Orgs.vue 中有一个简单的模板，如下所示:

<template lang="html">
  <div> {{orgs}} </div>
</template>

<script>
export default {
   data(){
    return {
      orgs: [];
    }
   },
   created() {
     //use axios to fetch orgs 
      this.orgs = response.data.orgs;  

   }
}
</script>

问题是，如果我想在其他页面中显示组织列表，我也必须为其他页面复制相同的代码，但我正在尝试找到一个可以调用返回组织的解决方案，以便我可以使用在多个页面？

解决这个问题的方法是什么？

Answer 1

要使数据在整个应用程序中可用，请使用 Vuex。它是将所有应用程序数据存储在单个源树中的状态管理库。

如果你不想用vuex解决上面的问题，你可以试试mixins。Mixins 是共享功能的最佳方式。

对于上述情况，您可以尝试这样的混合。

组织.mixin.js

const OrganisationMixin = Vue.mixin({
    data: function () {
        return { orgs: [] }
    },
    methods: {
        fetchOrgs: function() {
        // api to fetch orgs
          this.orgs = result_from_api
        }
    }
    mounted: function() {
        this.fetchOrgs()
    }
});
export default OrganisationMixin

现在让我们使用刚刚创建的mixin。

在 whatever_name_component.vue 中:

<template lang="html">
  <div> {{orgs}} </div>
</template>

<script>
import OrganisationMixin from 'path_to_organisation.mixin.js'
export default {
   mixins: [OrganisationMixin]
   data(){
    return { orgs: [] }
   },
   mounted() {
     console.log(this.orgs) //provided by mixin` and value is equal to api response from mixin.
   }
}
</script>