How to better support multiple stores with the same functionality in the same component.

[wucheng666]

In ① and ②, "Component2" is reused and uses the same pinia store. When I initialize the store data in ②, the data in ① will be overwritten(because they use the same store).
And when I close ②, the data of Component2 in ① is also wrong. Is there any good solution for this issue that supports multiple stores?
Note:

1. I wish I could pass "this" in mapActions(this.uuid, ) so I could initialize the pinia store by specifying a dynamic uuid(the store name) when initializing the store, but when loading mapActions, it seems that can't get "this".
2. vue uses the Options API, not Composition API.

[posva]

If the state used by the component is not used anywhere else in the app, just use a composable (that will be local to the component) and ditch the store. If not, then use a Map in the store and generate uuids when creating the components to ensure a specific data set for different components.

[wucheng666]

@posva Thank you for your reply😊

1. We are using a vue2.x project. We used Vuex before. Many components use "mapActions" and "mapState", so we can't use the Composition API.
2. Please review the following code to make sure I understand what you mean correctly

store.ts

import { defineStore } from 'pinia'
defineStore('storeName', {
  state: () => {
    return {
      model: {

      }
    }
  },
  getters: {
    storeModel () {
        return (uuid) => {
            return this.model[uuid]
        }
    }
  },
  actions: {
    async initStore (uuid) {
        const model = await controller.loadData(uuid)
        this.model[uuid] = model
    }
  }
})

UI

<template>
</template>

<script>
import { mapState, mapActions } from 'pinia'
import { customStore } from './store'
export default {
  name: '',
  components: {
  },

  data () {
    return {
    }
  },
  computed: {
    ...mapState (customStore, {
      model (store) {
        return store.storeModel(this.uuid)
      }
    }),
  },
  methods: {
    ...mapActions(customStore, ['initStore']),
  },
  created () {
    this.initStore(this.uuid)
  }
}
</script>

3. If so, isn't there a better solution for pinia in 2.x using "mapActions" and "mapState"? (in fact, the root cause of the issue is that during the compilation of Vue, when calling "mapActions" and "mapState", it still cannot get "this", if i can get "this", it becomes easy to support multiple stores.)

[posva]

FYI, You can use composables in Vue 2.6 and 2.7. If you are not using 2.7, you should definitely upgrade.
Yes, that version is more or less what I had in mind but applied with map* helpers. You should have better type inference (on this) by updating Vue and by using defineComponent() too. You can also use mapStores() and then just call this.storeNameStore.whatever in your own computed properties and actions. That way you have typings