init vuex store

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/App_test.vue

@@ -0,0 +1,19 @@
+<template>
+--: {{ course.id }} :-- 
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+   name: 'App',
+   computed: mapState([
+      'course'
+   ])
+   //computed: {
+   //   courseId() {
+   //      return this.$store.state.course.id;
+   //   }
+   //}
+};
+</script>

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/accompanyingCourse.js

@@ -0,0 +1,25 @@
+const 
+   locale = 'fr',
+   format = 'json',
+   accompanying_period_id = () => window.accompanyingCourseId 
+;
+
+// 1. chill_person_accompanying_course_api_show
+let getAccompanyingCourse = (accompanying_period_id) => {
+   const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/show.${format}`;
+   return fetch(url).then(response => response.json());
+};
+
+// 2. chill_person_accompanying_course_api_add_participation (POST)
+let getParticipations = (accompanying_period_id) => {
+   const url = `/${locale}/person/api/1.0/accompanying-course/${accompanying_period_id}/participation.${format}`
+   return fetch(url).then(response => response.json());
+};
+
+export { getAccompanyingCourse, getParticipations };
+
+
+
+///
+// cfr. promise.all() pour plusieurs promesses
+// catch throw sur le dernier then pour capturer l'erreur

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/api/participations.js

@@ -0,0 +1,5 @@
+
+const _participations = []
+
+export default {
+}

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/index.js

@@ -1,8 +1,16 @@
-import App from './App.vue';
 import { createApp } from 'vue';
+import createStore from './store';
+import App from './App_test.vue';
 
-const app = createApp({
-   template: `<app></app>`
-})
-.component('app', App)
-.mount('#accompanying-course');
+createStore.then(store => {
+
+   //console.log('store in create_store', store);
+   console.log('store course', store.state.course);
+
+   const app = createApp({
+      template: `<app></app>`,
+   })
+   .use(store)
+   .component('app', App)
+   .mount('#accompanying-course');
+});

src/Bundle/ChillPersonBundle/Resources/public/js/AccompanyingCourse/store/index.js

@@ -0,0 +1,21 @@
+import 'es6-promise/auto';
+import { createStore } from 'vuex';
+import { getAccompanyingCourse, getParticipations } from '../api/accompanyingCourse';
+
+const debug = process.env.NODE_ENV !== 'production';
+
+let promise = getAccompanyingCourse(window.accompanyingCourseId)
+   .then(accompanying_course => new Promise((resolve, reject) => {
+      let store = createStore({
+         state() {
+            return {
+               course: accompanying_course
+            }
+         },
+         strict: debug
+      });
+      //console.log('store', store);
+      resolve(store);
+   }));
+
+export default promise;