Inject data map into all stores

[bobmcallan]

I'd like to add/inject a data map object into every store.

Currently using the following:

export const DATA_DEFAULTS = {

    data: new Map(),

    total: 0,
    size: 25,
    page: 0,

    loading: false,

}

export function dataPlugin({ store, options }) {

store.$state = () => Object.assign({}, store.$state, DATA_DEFAULTS)

}

The map is not created in each store? How should I inject/create.

[dreambo8563]

follow the docs https://pinia.vuejs.org/core-concepts/plugins.html#augmenting-a-store

const pinia = createPinia();
pinia.use(({ store }) => {
  store.$router = markRaw(router);
  store.page = 10;
});

[bobmcallan]

Thanks.

However this does not work as expected.

store.data = new Map()
store["data"] = new Map()
store.$state = new Map()
store.$state = ref(new Map())

Is not equivalent to

state: () => ({
        data: new Map(),
}),

[dreambo8563]

I just test it with demo code
https://stackblitz.com/edit/github-lhblpb-7cqihs?file=src/main.js

main.js

pinia.use(({ store }) => {
  store.m = new Map();
});

App.vue

 const l = useLocaleStore();
    console.table(l.m);
    l.m.set('key1', 1);

also have a vfor to show the values. pls check the code

[posva]

You need to assign directly to the $state and then add refs of each added property like shown in docs:

Object.assign(store.$state, DATA_DEFAULTS)

store.data = toRef(store.$state, 'data')

See https://pinia.vuejs.org/core-concepts/plugins.html#adding-new-state

[bobmcallan]

I'll try that.

Thx.

[bobmcallan]

My working solution.

    Object.assign(store.$state, DATA_DEFAULTS)

    for (const property in store.$state) {
        store[property] = toRef(store.$state, property)
    }