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是分享功能的最佳方式。

对于上述情况，你可以试试这样的混音。

organisation.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>

我在哪里可以存储vuejs中的可共享数据？

1 个答案: