AngularJS服务( Vue.js )

Question

我是Vue.js的新手，我在AngularJS中寻找类似于服务的服务，特别是存储一次数据并在整个应用程序中获取数据。

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

我和Webpack一起使用Vue.JS 2.0。

谢谢!

Answer 1

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

下面是我的代码中的一个基本演示。

store/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;

store/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>

Answer 2

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

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

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

import service from 'filenameofyourresources';

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

请注意，这是ES6代码，需要转换到ES5，然后才能真正使用今天的浏览器。

• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/import
• https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/export