add vuex

vue2/package-lock.json

@@ -9500,6 +9500,11 @@
       "integrity": "sha512-mRz/m/JVscCrkMyPqHc/bczi3OQHkLTqXHEFu0zDhK/qfv3UcOA4SVmRCLmos4bhjr9ekVQubj/R7waKapmiQg==",
       "dev": true
     },
+    "shvl": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/shvl/-/shvl-2.0.2.tgz",
+      "integrity": "sha512-G3KkIXPza3dgkt6Bo8zIl5K/KvAAhbG6o9KfAjhPvrIIzzAhnfc2ztv1i+iPTbNNM43MaBUqIaZwqVjkSgY/rw=="
+    },
     "signal-exit": {
       "version": "3.0.3",
       "resolved": "https://registry.npmjs.org/signal-exit/-/signal-exit-3.0.3.tgz",
@@ -11026,6 +11031,27 @@
       "resolved": "https://registry.npmjs.org/vuelidate/-/vuelidate-0.7.6.tgz",
       "integrity": "sha512-suzIuet1jGcyZ4oUSW8J27R2tNrJ9cIfklAh63EbAkFjE380iv97BAiIeolRYoB9bF9usBXCu4BxftWN1Dkn3g=="
     },
+    "vuex": {
+      "version": "3.6.0",
+      "resolved": "https://registry.npmjs.org/vuex/-/vuex-3.6.0.tgz",
+      "integrity": "sha512-W74OO2vCJPs9/YjNjW8lLbj+jzT24waTo2KShI8jLvJW8OaIkgb3wuAMA7D+ZiUxDOx3ubwSZTaJBip9G8a3aQ=="
+    },
+    "vuex-persistedstate": {
+      "version": "4.0.0-beta.3",
+      "resolved": "https://registry.npmjs.org/vuex-persistedstate/-/vuex-persistedstate-4.0.0-beta.3.tgz",
+      "integrity": "sha512-T4IRD27qoUWh+8qr6T6zVp15xO7x/nPgnU13OD0C2uUwA7U9PhGozrj6lvVmMYDyRgc36J0msMXn3GvwHjkIhA==",
+      "requires": {
+        "deepmerge": "^4.2.2",
+        "shvl": "^2.0.2"
+      },
+      "dependencies": {
+        "deepmerge": {
+          "version": "4.2.2",
+          "resolved": "https://registry.npmjs.org/deepmerge/-/deepmerge-4.2.2.tgz",
+          "integrity": "sha512-FJ3UgI4gIl+PHZm53knsuSFpE+nESMr7M4v9QcgB7S63Kj/6WqMiFQJpBBYz1Pt+66bZpP3Q7Lye0Oo9MPKEdg=="
+        }
+      }
+    },
     "watchpack": {
       "version": "1.7.5",
       "resolved": "https://registry.npmjs.org/watchpack/-/watchpack-1.7.5.tgz",

vue2/package.json

@@ -11,7 +11,9 @@
     "core-js": "^3.6.5",
     "vue": "^2.6.11",
     "vue-router": "^3.4.9",
-    "vuelidate": "^0.7.6"
+    "vuelidate": "^0.7.6",
+    "vuex": "^3.6.0",
+    "vuex-persistedstate": "^4.0.0-beta.3"
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "~4.5.0",

vue2/src/components/SharedCounter.vue

@@ -0,0 +1,40 @@
+<template>
+  <div>
+    <p>Valeur actuelle depuis le store {{ count }}</p>
+    <p>Valeur doublée {{ doubleCount }}</p>
+    <button @click="increment">Incrémenter</button>
+    <button @click="decrement">Décrémenter</button>
+    <button @click="$store.commit('counter/setValue', 42)">
+      Mettre le compteur à 42
+    </button>
+    <button @click="$store.dispatch('counter/delayDecrement')">
+      Delay decrement
+    </button>
+  </div>
+</template>
+
+<script>
+import { /*mapMutations,*/ mapState, mapGetters } from "vuex";
+
+export default {
+  computed: {
+    // count() {
+    //   return this.$store.state.counter.count;
+    // },
+    ...mapState("counter", ["count"]),
+    // ...mapState({
+    //   countAlias: state => state.count,
+    // }),
+    ...mapGetters("counter", ["doubleCount"]),
+  },
+  methods: {
+    // ...mapMutations("counter", ["increment", "decrement"]),
+    increment() {
+      this.$increment();
+    },
+    decrement() {
+      this.$decrement();
+    },
+  },
+};
+</script>

vue2/src/main.js

@@ -1,5 +1,7 @@
 import Vue from "vue";
 import VueRouter from "vue-router";
+import Vuex from "vuex";
+import createPersistedState from "vuex-persistedstate";
 import Vuelidate from "vuelidate";
 import Layout from "./Layout.vue";
 import ComponentLayout from "./ComponentLayout.vue";
@@ -24,15 +26,10 @@ const Link = () =>
 
 Vue.use(VueRouter);
 Vue.use(Vuelidate);
+Vue.use(Vuex);
 
 Vue.config.productionTip = false;
 
-Vue.component("greet", {
-  render: (h) => h("p", "Hello there"),
-});
-
-Vue.filter("uppercase", (v) => v.toString().toUpperCase());
-
 // function requireAuth(to, from, next) {
 //   // On vérifie si l'utilisateur est authentifié
 //   const isAuthenticated = false;
@@ -48,6 +45,7 @@ const router = new VueRouter({
   // linkActiveClass: '',
   mode: "history",
   routes: [
+    { path: "/vuex", component: () => import("./pages/VuexTest.vue") },
     {
       path: "/components",
       component: ComponentLayout,
@@ -112,7 +110,64 @@ router.afterEach((to) => {
   document.title = to.meta.title;
 });
 
+const store = new Vuex.Store({
+  modules: {
+    counter: {
+      namespaced: true,
+      state: {
+        count: 0,
+      },
+      mutations: {
+        increment(state) {
+          state.count++;
+        },
+        decrement(state) {
+          state.count--;
+        },
+        setValue(state, value) {
+          state.count = value;
+        },
+      },
+      actions: {
+        delayDecrement(context) {
+          context.commit("increment");
+
+          setTimeout(() => context.commit("decrement"), 5000);
+        },
+      },
+      getters: {
+        doubleCount(state) {
+          return state.count * 2;
+        },
+      },
+    },
+  },
+  plugins: [
+    createPersistedState({
+      // paths: ['counter']
+    }),
+  ],
+});
+
+Vue.use({
+  install(v) {
+    v.prototype.$increment = function() {
+      this.$store.commit("counter/increment");
+    };
+
+    v.prototype.$decrement = function() {
+      this.$store.commit("counter/decrement");
+    };
+
+    v.component("greet", {
+      render: (h) => h("p", "Hello there"),
+    });
+    v.filter("uppercase", (v) => v.toString().toUpperCase());
+  },
+});
+
 new Vue({
+  store,
   router,
   render: (h) => h(Layout),
 }).$mount("#app");

vue2/src/pages/VuexTest.vue

@@ -0,0 +1,16 @@
+<template>
+  <div>
+    <shared-counter />
+
+    <!-- Beaucoup plus loin dans mon application ... -->
+    <shared-counter />
+  </div>
+</template>
+
+<script>
+import SharedCounter from "../components/SharedCounter";
+
+export default {
+  components: { SharedCounter },
+};
+</script>