Vue.js 中的 AngularJS 服务答案

【问题标题】：AngularJS services in Vue.jsVue.js 中的 AngularJS 服务
【发布时间】：2016-11-07 16:04:31
【问题描述】：

我是 Vue.js 的新手，正在寻找与 AngularJS 中的服务等效的东西，专门用于存储一次数据并在整个应用程序中获取数据。

我将主要存储网络请求的结果和其他承诺的数据，所以我不需要在非常状态下再次获取。

我正在使用带有 Webpack 的 Vue.JS 2.0。

谢谢！

【问题讨论】：

标签： vue.js

【解决方案1】：

我认为你正在寻找的是 vuex，它可以共享来自每个组件的数据。

这是一个来自我的代码的基本演示。

商店/lottery.module.js

import lotteryType from './lottery.type'


const lotteryModule = {

    state: {participantList: []},
    getters: {},
    mutations: {
        [lotteryType.PARTICIPANT_CREATE] (state, payload) {
            state.participantList = payload;
        }
    },
    actions: {
        [lotteryType.PARTICIPANT_CREATE] ({commit}, payload) {

            commit(lotteryType.PARTICIPANT_CREATE, payload);
        }
    }
};

export default lotteryModule;

商店/lottery.type.js

const PARTICIPANT_CREATE = 'PARTICIPANT_CREATE';

export default {PARTICIPANT_CREATE};

存储/index.js

Vue.use(Vuex);
const store = new Vuex.Store();
store.registerModule('lottery', lotteryModule);

export default store;

组件/lottery.vue

<template>

<div id="preparation-container">
    Total Participants: {{participantList.length}}
</div>

</template>


<script>

import router from '../router';
import lotteryType from '../store/lottery.type';


export default {
    data () {
        return {
        }
    },
    methods: {
    }，
    computed: {
        participantList() {
            return this.$store.state.lottery.participantList;
        }
    },
    created() {
        this.$store.dispatch(lotteryType.PARTICIPANT_CREATE, [{name:'Jack'}, {name:'Hugh'}]);
    },
    mounted() {

    },
    destroyed() {

    }
}

</script>

【讨论】：

【解决方案2】：

在 Vue2 中您不需要特定于 Vue 的服务，因为它基于使用模块的现代版 JavaScript。因此，如果您想在代码中的不同位置重用某些服务，您可以按如下方式定义和导出它：

export default {
    someFunction() {
        // ...
    },
    someOtherFunction() {
        // ...
    }
};

然后从你的 Vue 代码中导入：

import service from 'filenameofyourresources';

export default {
    name: 'something',
    component: [],
    data: () => ({}),
    created() {
        service.someFunction();
    },
};

请注意，这是 ES6 代码，需要先转换为 ES5，然后才能在当今的浏览器中实际使用。

【讨论】：