history is functionnal and with state transition

src/components/Content/HistoryItem.vue

@@ -0,0 +1,42 @@
+<template>
+  <article class="history item">
+    <header>
+      <h1>
+        <a
+          :href="item.url"
+          @click.prevent="onclick"
+          @keyup.enter="onclick"
+          v-html="item.textId"
+        />
+      </h1>
+    </header>
+    <div class="extract" v-html="item.extract" />
+  </article>
+</template>
+
+<script>
+
+import { mapActions } from 'vuex'
+
+export default {
+  name: 'HistoryItem',
+  props: {
+    item: {
+      type: Object,
+      required: true
+    }
+  },
+  methods: {
+    ...mapActions({
+      navigateToHistoryItem: 'History/navigateToItem'
+    }),
+    onclick () {
+      console.log('clicked on history item', this.item)
+      this.navigateToHistoryItem(this.item)
+    }
+  }
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

src/components/Content/Item.vue

@@ -1,63 +0,0 @@
-<template>
-  <transition name="fade" appear>
-    <span v-if="!loaded">Loading...</span>
-    <article v-else class="item">
-      <header>
-        <h1>
-          {{ item.title }}
-        </h1>
-      </header>
-      <section v-html="item.tei" />
-    </article>
-  </transition>
-</template>
-
-<script>
-
-import { REST } from 'api/rest-axios'
-
-export default {
-  name: 'Item',
-  props: {
-    uuid: {
-      type: String,
-      required: true
-    }
-  },
-  data: () => ({
-    loaded: false,
-    item: {}
-  }),
-  watch: {
-    '$route' (to, from) {
-      console.log('item route change')
-      this.loadItem()
-    }
-  },
-  created () {
-    console.log('Item created', this.uuid)
-    this.loadItem()
-  },
-  updated () {
-    console.log('item updated', this.uuid)
-  },
-  methods: {
-    loadItem () {
-      this.loaded = false
-      REST.get(`/items/` + this.uuid, {})
-        .then(({ data }) => {
-          console.log('item REST: data', data)
-          this.item = data.content
-          this.loaded = true
-        })
-        .catch((error) => {
-          console.warn('Issue with item', error)
-          Promise.reject(error)
-        })
-    }
-  }
-}
-</script>
-
-<style lang="scss" scoped>
-</style>

src/components/Content/ResultItem.vue

@@ -15,6 +15,9 @@
 </template>
 
 <script>
+
+import { mapActions } from 'vuex'
+
 export default {
   name: 'ResultItem',
   props: {
@@ -23,16 +26,17 @@ export default {
       required: true
     }
   },
-  data: () => ({
-
-  }),
   methods: {
+    ...mapActions({
+      addHistoryItem: 'History/addItem'
+    }),
     onclick () {
       console.log('clicked on result item', this.result)
-      this.$router.push({
-        name: `item`,
-        params: { uuid: this.result.uuid }
-      })
+      this.addHistoryItem(this.result)
+      // this.$router.push({
+      //   name: `item`,
+      //   params: { uuid: this.result.uuid }
+      // })
     }
   }
 }