Vuejs:我应该在vue-router SPA中放置一些常见的js util?

时间:2016-04-18 23:42:57

标签: javascript ecmascript-6 single-page-application vue.js vue-router

在我的Vuejs项目中,我有一些常用的js函数可以通过多个组件使用:

我的代码结构如下所示,它是在http://vuejs.github.io/vuex/en/structure.html中引入的:

├── index.html
├── main.js
├── components
│   ├── App.vue
│   └── ...
└── vuex
    ├── store.js     # exports the store (with initial state and mutations)
    └── actions.js   # exports all actions

some_component.vue

<template>
// The page content
</template>

<script>
export default {
    attached: function() {
        if(!isLoggedIn) {
            $this.router.go('/signin');
        }
    }
}
</script>

在这种情况下,我想创建一个函数loginRequired,它将在几个组件中调用。

那我该如何组织代码?

1 个答案:

答案 0 :(得分:4)

这是我的选择

├── index.html
└── src
    ├── main.js
    ├── config.js        # Here I define global constants like a base url for vue-resource
    ├── api              # here is all the http calls using Vue.resource
    │   ├── index.js
    │   └── resource.js  # here I define interceptors, for errors log, auth, etc
    ├── components
    │   ├── utils        # Here I define common functions for components
    │   ├── App.vue
    │   └── ...
    └── vuex
        ├── store.js     # exports the store (with initial state and mutations)
        └── actions.js   # exports all actions

所以你想要的,根据我的文件结构,应该在src/components/utils文件夹中,至少它使用一些http调用,在这种情况下,它将成为src/api api的一部分夹。在这种情况下,路线位于main.js文件中,有些人更喜欢在routes.js文件夹中设置专用文件src,这取决于您