Ich bin neu bei Vue.js und suche nach dem Gegenstück zu einem Dienst in AngularJS, speziell um Daten einmal zu speichern und in der gesamten App zu erhalten.AngularJS-Dienste in Vue.js
Ich werde hauptsächlich die Ergebnisse von Netzwerkanforderungen und andere versprochene Daten speichern, so dass ich nicht wieder auf sehr Zustand abrufen muss.
Ich benutze Vue.JS 2.0 mit Webpack.
Danke!
Ich denke, was für u suchen, ist vuex, die Daten von jeder Komponente teilen können.
Hier ist eine grundlegende Demo, die von meinem Code.
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};
store/index.js
Vue.use(Vuex);
const store = new Vuex.Store();
store.registerModule('lottery', lotteryModule);
export default store;
component/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>
Sie benötigen keine Vue-spezifischen Dienste in Vue2, da sie auf einer modernen Version von JavaScript basieren, die stattdessen Module verwendet. Also, wenn Sie einige Dienste an verschiedenen Stellen im Code wiederverwenden möchten, können Sie es definieren und exportieren wie folgt:
export default {
someFunction() {
// ...
},
someOtherFunction() {
// ...
}
};
Und dann von Ihrem Vue Code importieren:
import service from 'filenameofyourresources';
export default {
name: 'something',
component: [],
data:() => ({}),
created() {
service.someFunction();
},
};
Beachten Sie, dass diese ist ES6-Code, der zu ES5 übertragen werden muss, bevor Sie es tatsächlich heutige Browser verwenden können.