title: How to inject a mock Pinia store to a Vue component based on routing
body: <p>I am using Vue together with Pinia stores and Vue-router.
  I have a component <code>Projects.vue</code> that uses a <code>project.store.ts</code> to display some data on the screen when a user goes to someSite.com/projects:</p>
  <pre><code>&lt;!-- Projects.vue --&gt;
  &lt;template&gt;
   &lt;div v-each=&quot;project in projects&quot;&gt;
    {{project.name}}
   &lt;/div&gt;
  &lt;/template&gt;
  
  &lt;script setup lang=&quot;ts&quot;&gt;
   import { useProjectStore } from &quot;../stores/project.store&quot;;
  
   const projectStore = useProjectStore();
   const { projects } = storeToRefs(projectStore);
  
   projectStore.getAll();
  &lt;/script&gt; 
  
  &lt;!-- project.store.ts --&gt;
  export const useProjectStore = defineStore({
    id: &quot;project&quot;,
    state: () =&gt;
      ({
        projects: [],
      } as ProjectStoreState),
  
    actions: {
      async getAll() {
        this.projects = await fetch.get(`${baseUrl}`);
      }
    },
  });
  
  </code></pre>
  <p>What I want to do is to introduce Demo functionality, where if a user goes to someSite.com/demo/projects, it's served the same Projects.vue component, however with static data that I've defined in the code.</p>
  <p>I was thinking to create a <code>project.store.mock.ts</code>, which follows the same interface just does</p>
  <pre><code>actions: {
      async getAll() {
        this.projects = [{name: &quot;project1&quot;}]
      }
    },
  </code></pre>
  <p>However, I am struggling to find a way to <em>inject</em> a different store based on the route. This might of course be a completely wrong way to approach it, but I would like to keep the same component, just present different data (data from different sources) based on routing</p>