Import another store in the store root?

[jenstornell]

https://pinia.vuejs.org/cookbook/composing-stores.html#nested-stores

Below works but has duplication

As the example below shows I need to declare const actionStore in every single method.

import { defineStore } from 'pinia';
import { useActionStore } from './actions'

export const myStore= defineStore('example', {
  state: () => ({
    insert: null,
    rename: 123,
    add: 'ok',
  }),
  actions: {
    insert() {
      const actionStore= useActionStore();

      actionStore.myAction(this.insert);
    },
    add() {
      const actionStore= useActionStore();

      actionStore.myAction(this.add);
    },
    rename() {
      const actionStore= useActionStore();

      actionStore.myAction(this.rename);
    },
  },
})

Below is kind of what I wish for

Here I declare it in the global scope of the file. It however throws an error that I don't have Pinia set up.

import { defineStore } from 'pinia';
import { useActionStore } from './actions'

const actionStore= useActionStore();

export const myStore= defineStore('example', {
  state: () => ({
    insert: null,
    rename: 123,
    add: 'ok',
  }),
  actions: {
    insert() {
      actionStore.myAction(this.insert);
    },
    add() {
      actionStore.myAction(this.add);
    },
    rename() {
      actionStore.myAction(this.rename);
    },
  },
})

Is there a way I can do it in the global space like the second example? That to avoid duplicate and longer code. Any ideas are welcome.

[soc221b]

Use plugin to add a method to every stores:

function myPlugin() {
  return {
    callActionStoreMyMethodWith(...args) {
      const actionStore = useActionStore()
      return actionStore.myMethond(...args)
    }
  }
}

// ...
insert() {
  this.callActionStoreMyMethodWith(...)
}

(or just extract that as a helper function.)

[jenstornell]

I saw the answer from @iendeavor but I'm not sure I like it. Would it be terrible to use the method directly without adding it as a const first?

I've changed my example below where actionStore now is a method that can be used inside the store.

import { defineStore } from 'pinia';
import { useActionStore as actionStore } from './actions'

export const myStore= defineStore('example', {
  state: () => ({
    insert: null,
    rename: 123,
    add: 'ok',
  }),
  actions: {
    insert() {
      actionStore().myAction(this.insert);
    },
    add() {
      actionStore().myAction(this.add);
    },
    rename() {
      actionStore().myAction(this.rename);
    },
  },
})

If this is bad practice or bad in any way, please let me know.

[posva]

this seems fine

[posva]

A more convenient way is to use a setup store (it's the third example at https://pinia.vuejs.org/introduction.html#basic-example but it's not covered much in docs yet) You can call useActionStore() once in that scenario, outside of actions

[rtek]

but it's not covered much in docs yet

Use ref for state, computed for getters and regular functions for actions

Can you elaborate on these points?

I'm interested in the composed store concept but am not clear on the pros and cons of the various defineStore methods. Are there certain things the various defineStore methods can and cannot do?

[hidde-jan]

It's really just like writing a component, so if you already know how to use the composition api in components, you know how to use it in pinia 🙂 : Use ref for state, computed for getters and regular functions for actions

@posva It seems like the example you mention (store composition/nested stores with the Composition API) was removed from the docs. Would it be something like this?

const useCounterStore = defineStore('counter', () => {
  const counter = ref(0)
  const double = computed(() => counter.value * 2)
  const increment = () => (counter.value += 1)

  return { counter, double, increment }
})

const useAlphabetStore = defineStore('alphabet', () => {
  const counterStore = useCounterStore()

  const counterCopy = ref(counterStore.counter)
  const character = computed(() => String.fromCharCode(97 + counterStore.counter))
  const quadruple = () => {
    counterStore.increment()
    counterStore.increment()
  }

  return {
    counterCopy,
    character,
    quadruple
  }
})

[synopss]

I like this approach, but when your store is increasing in size, you will have to add a lot of values in the return statement, Wouln't be better to have a solution similar to what we have for components with <script setup> ?

[elizatlawy]

@synopss Can you provide a code example, please?
I did not manage to use the <script setup> within a Pinia store.

[synopss]

@synopss Can you provide a code example, please? I did not manage to use the <script setup> within a Pinia store.

This was a suggestion. Right now, it's not possible to do it.

[dikaso]

If you are using Pinia ouf of Vue/Pinia context do not cal useStore at top of the file like this:

import { setActivePinia, createPinia } from 'pinia';
import { createApp } from 'vue';
import { useSStore } from '@/modules/s';
import { useEnvironmentHandlerStore } from '@/common/stores/environment-handler';
import { useENVStore } from '@/common/stores/env';

// **this is wrong !!!**
const { getCompanyNameNormalized } = useSStore();
const environmentHandlerStore = useEnvironmentHandlerStore();
const ENVStore = useENVStore();

const getS3LogoUrl = () => {
  const { url } = ENVStore.data.s3;
  const cn: string = getCompanyNameNormalized().toLowerCase();
  const dc = environmentHandlerStore.getDc();
  const companyName = `${cn}${dc ? `_${dc}` : ''}`;
  const containerName = `${companyName}_logo-images`;

  return `${url}/${companyName}/${containerName}/terminal_logo.png`;
};

const getLogoUrl = () => {
  const companyName: string = getCompanyNameNormalized().toLowerCase();
  const url: string = 'https://cdn.com/public/';
  return `${url}${companyName}/media/logo.png`;
};

export default {
  getS3LogoUrl,
  getLogoUrl,
};

[lbrcs]

@posva hi there, i just stumbled upon this issue and was wondering is there by now any recommended way to also do this with an option store? we're currently not planning on using a setup store, so i am currently looking for the best way to do this within an option store..

[lbrcs]

would the suggestion by jenstornell still be a valid solution?

[baby5]

I like options API more, so it will be better to have a solution for options API.

There may be many guys like me.

So, thx very much @posva. you are Vue man, true hero.