Vue.js中的AngularJS服務

我是Vue.js的新手，在AngularJS中尋找相當於服務的服務，專門用於存儲數據一次，並在整個應用程序中獲取。Vue.js中的AngularJS服務

我將主要存儲網絡請求和其他承諾數據的結果，所以我不需要再次取得非常狀態。

我在Webpack中使用了Vue.JS 2.0。

謝謝！

來源

2016-11-07 Leo

我想什麼ü正在尋找是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>

來源

2017-01-24 03:16:40

您不需要Vue2中特定於Vue的服務，因爲它基於現代版本的使用模塊的JavaScript代替。所以，如果你想重用代碼中的不同位置的一些服務，你可以定義並導出如下：

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

，然後從Vue公司代碼導入：

import service from 'filenameofyourresources'; 

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

注意，這是ES6代碼，需要先轉換到ES5，然後才能真正使用它的今日瀏覽器。

來源

2016-11-07 17:08:26 str

Vue.js中的AngularJS服務

回答

相關問題