How inject dependency to store?

[norvele]

I want to inject Service\Client (fetching from apis) to store. How can i do this? Thanks

[posva]

right now you can use pinia.use() but I plan on redesigning the API to make it more flexible. For example, with mande, you can register a mande instance like this:

const api = mande('/api')

// this line will be different in future versions and it will be documented too
pinia.use(() => ({ api })

defineStore({
  id: 'a',
  state: () => ({ users: [] })
  actions: {
    async fetchStuff() {
      this.users = await this.api.get('/users')
     }
  }
})

// for ts
import 'pinia'
declare module 'pinia' {
  import { MandeInstance } from 'mande'
  export interface PiniaCustomProperties {
    api: MandeInstance
  }

This allows you to attach headers with Bearer tokens to the api objects and use them for one request only during server side rendering

If you don't have SSR or stateful requests (e.g. bearer tokens, cookies), then just import whatever you need:

import axios from 'axios'

defineStore({
  id: 'a',
  state: () => ({ users: [] })
  actions: {
    async fetchStuff() {
      this.users = await axios.get('/api/users')
     }
  }
})

[knightazura]

Hello @posva
Sorry for silly question, I'm still newbie in Typescript and just used pinia recently.

Can you give explicit example for usage with typescript in vue?

I've integrate an api plugin with this approach in main.ts file

import { createPinia } from "pinia";
import Dashboard from "./modules/dashboard";

const dashboard = new Dashboard();

const pinia = createPinia()
  .use(() => {
    return { dashboard };
  });

It's working inside any store, so I can call it like this this.dashboard.fetch(). But it's better if I can get it with type check, it would silence the editor error and of course auto complete.

Thanks

[posva]

https://pinia.vuejs.org/core-concepts/plugins.html#typing-new-store-properties

[LandSprutte]

Hi, I am curious how this works when using the "Setup stores"-syntax. We cannot access "this"-context in that scope. right?

Thanks

[karmats]

@LandSprutte You can access this-context in the actions if you define them as function someFun() {} and not const someFun = () => {}

[tabun-matadorov]

@LandSprutte yes, there is no this in setup store, so I've used a simple store to get deps from:

const useDiStore = defineStore('di', {});

export const useDependencyInjection = (): DiContainer => {
    const { $di } = useDiStore();
    return $di;
};

and than it could be used as

export const useLoginStore = defineStore('login', () => {
    const { loginInfo } = useDependencyInjection();
    ...