KPC
Kevin Powell - Community•2mo ago
Tabletop

Vue, Pinia, VueRouter and await

When data fetching, what is the best way to fetch and then store in Pinia? use await inside your store?? Or have variables in your store and fetch from a composible in a index.vue I would prefer to use just one .vue file if possible, but it seems at the moment, I have to use multiple like /tags/my_tag which are done by just making a tagsfolder and puting [my_tag].vuein there My reason for usia a pinia store is to sync data across .vue files I'm trying different combinations but keep breaking my app!
3 Replies
vinter.
vinter.•2mo ago
Assuming you have a centralized fetch client i.e. 
import axios from 'axios';

export async function useFetch(url) {
  try {
    const response = await axios.get(url);
    return { data: response.data, error: null };
  } catch (err) {
    return { data: null, error: err.message };
  }
}
import axios from 'axios';

export async function useFetch(url) {
  try {
    const response = await axios.get(url);
    return { data: response.data, error: null };
  } catch (err) {
    return { data: null, error: err.message };
  }
}
Then you just create a store and await there yeah 
import { defineStore } from 'pinia';
import { useFetch } from '@/connections/useFetch';

export const useStore = defineStore('store', {
  state: () => ({
    data: null,
    error: null,
  }),
  actions: {
    async fetchData() {
      const { data, error } = await useFetch('/api/endpoint');
      this.data = data;
      this.error = error;
    },
  },
});
import { defineStore } from 'pinia';
import { useFetch } from '@/connections/useFetch';

export const useStore = defineStore('store', {
  state: () => ({
    data: null,
    error: null,
  }),
  actions: {
    async fetchData() {
      const { data, error } = await useFetch('/api/endpoint');
      this.data = data;
      this.error = error;
    },
  },
});
There's nothing preventing you from importing the store across different files 
<script>
import { useStore } from '@/stores/store';

export default {
  async setup({ params }) {
    const myStore = useMyStore();
    await myStore.fetchData(`/tags/${params.my_tag}`);
    return { myStore };
  },
};
</script>
<script>
import { useStore } from '@/stores/store';

export default {
  async setup({ params }) {
    const myStore = useMyStore();
    await myStore.fetchData(`/tags/${params.my_tag}`);
    return { myStore };
  },
};
</script>
Tabletop
TabletopOP•2mo ago
I've copied your code just wondering why you don't use the Composition API 
//data.ts
export const useDataStore = defineStore('data', () => {
  let files = ref<Record<string,any>[]>([])

  async function getFiles(){
    files.value =  await client.request(...)

  return { 
    files 
  }

//index.vue
const data = useDataStore()
(async () => await data.getFiles())();
(async () => await data.getTags())();
//data.ts
export const useDataStore = defineStore('data', () => {
  let files = ref<Record<string,any>[]>([])

  async function getFiles(){
    files.value =  await client.request(...)

  return { 
    files 
  }

//index.vue
const data = useDataStore()
(async () => await data.getFiles())();
(async () => await data.getTags())();
just thinking, a strategy to make sure getFiles is only run once
vinter.
vinter.•2mo ago
Oh yeah sure, no reason not to Was just simplified for the example

Did you find this page helpful?