jpbecotte

Le gestion des collections avec Vuex (ou comment bien intégrer vos appels API dans le store)

Ce document traite de la partie «lecture» des données. Vous savez comment utiliser Axios pour aller chercher les données donc il suffit maintenant de savoir comment les organiser.

On parle aussi de module de collection, car votre module gèrera une collection (liste sans ordre apparant) d'objets.

La première étape consiste à bien recenser vos actions, car ce sont elles qui détermineront la suite des chose. En gros, faites une liste à partir des différentes parties d'écran. Pour chaque action:

• Y a-t-il des paramètres?
• Quels sont les appels d'API nécessaires? On veut aussi le moins possibles d'actions sans toutefois charger des données inutilement. Par exemple, pour les compétences, on veut pouvoir:

jpbecotte

const transform = (object, props) => {
  const x = {
    original: { ...object },
    observers: [],
  };
  props.forEach(prop => {
    Object.defineProperty(x, prop, {
      configurable: false,
 enumerable: true,

jpbecotte

function sendData(url, data) {
  const formData = new FormData();

  for (let name in data) {
    formData.append(name, data[name]);
  }

  fetch(url, {
 method: 'POST',

jpbecotte

Cours 1.1 - Révision Javascript et apports des nouvelles version ECMASCRIPT

Résumé.

• ES6 (ou 2015): gros changement
• Depuis, ES7, ES8, etc. Perfectionnements

Les contextes syntaxiques

Il faut se souvenir des contextes des trois principaux délimiteurs:

jpbecotte

Introduction

I have been struggling to start a new project with Phoenix 1.3 and the new vue-cli 3 for Vue.js. There are tons of example already but none of them suited my needs, because:

• I want to use the new Vue-cli to select the features that I want,
• I do NOT want to setup Webpack (I know, what a shame!). The new Vue-cli includes the new vue-cli-service, which uses an instance of webpack-dev-server, so you don't have to import it manually in your project.
• I do not want to use Brunch.

Create your Phoenix App

Assuming that you have Elixir and Phoenix 1.3 are both installed, let's build our new App.

jpbecotte

Le routeur

Le routeur présente plusieurs avantages:

• Délégation de la navigation avec l'API du navigateur
• Meilleure structuration du projet
• Utilisation d'un layout

Les routes sont définies dans le fichier router/index.js:

jpbecotte

  def create(conn, %{"fb_token" => fb_token, "version" => version}) do #from API
    if ! version_check(conn, version) do
      send_bad_version(conn)
    else
      Facebook.Config.appsecret "xxxxxxxx"
      Facebook.Config.graph_url "https://graph.facebook.com/"

      {:json, data} = Facebook.me("email,name", fb_token)
      Logger.debug "FB API CALL returns: #{inspect(data)}"