How can I share data from one component in JSS with Vue Js?

Question

As a developer,
I want to change data from a component in ONE place,
so that I don't need to duplicate this data for each pages

How can I ask to my
src/app/components/header-nav.vue

<template>
    <sc-link :field="fields.link" />         
</template>

<script>
import { Link } from '@sitecore-jss/sitecore-jss-vue';

  export default {
    name: 'HeaderNav',
    props: {
      fields: {
        type: Object,
        default: () => ({}),
      }
    },
    data:  function () {
      return {}
    },
    components: {
      ScLink: Link,
    }
  };
</script>

<style>

</style>

to use data from
data/components/header-nav/en.json

{
  "name": "Header Nav",
  "componentName": "HeaderNav",
  "fields": {
    "link": { 
      "value": {
        "href": "/services",
        "title": "Services",
        "text": "Services"
      }
    }
  }
}

instead of
data/routes/en.json

{
  "name": "services",
  "displayName": "Services",
  "placeholders": {
    "main": [
      {
        "componentName": "HeaderNav",
        "fields": {
          "link": {
            "value": {
              "href": "/services",
              "title": "Services",
              "text": "Services"
            }
          }
        }
      }
    ]
  }
}

Thanks!

Answer 1

You can do this using ID references introduced in technical preview 3.

Essentially, you define a shared piece of component content under /data/component-content, give it an explicit, app-wide-unique id value, and then refer to it from a route to include the shared reference.

The Angular Basic app has an example of doing this here. It is using YAML instead of JSON for its route data, but the equivalent JSON structure also works.

Note that ID references work at a component level, but not a route level. So while you can share a single piece of lorem ipsum component content throughout the app if you wish, you cannot literally re-route the same route to a different shared route. If you wanted to do some route rewriting behavior, you'd need to implement your custom logic in /sitecore/definitions/routes.sitecore.js, which is where all the YAML/JSON files are parsed into the manifest.

Note: for Vue in TP3, you'll also need to borrow the missing /sitecore/definitions/component-content.sitecore.js file from here to get component-content to build into the manifest. This will not be necessary for versions after technical preview 3.