Is there any way to define and use state in the model, same way as it was in Vuex?

[Derranion]

Hello guys,

Could you please tell.

Is there any way to define and use global state in the model - the same way as it was in Vuex?

For example currently we are defining models in PiniaORM this way:

export class Page extends Model {
    static entity = 'Page';

    static fields () {
        return {
            id: this.uid(''),
            category_id: this.attr(''),
       }
   }

Is there any way to add global "loading" state, the same way as it was possible in Vuex:

export class Page extends Model {
    static entity = 'Page';

    static state() {
        return {
            loading: false,
            current_page: null,
    }

    static fields () {
        return {
            id: this.uid(''),
            category_id: this.attr(''),
       }
   }

Because looks like Pinia ORM does not support global state there.

Thanks in advance.

[jhercog]

@Derranion If I correctly understand the issue, you should be able to achieve your goal with the following pattern:

import { Model, useStoreActions } from 'pinia-orm'

export class Page extends Model {
  static entity = 'Page'

  static fields () {
    return {
      id: this.uid(''),
      category_id: this.attr(''),
    }
  }

  static piniaOptions = {
    state: () => ({
      data: {},
      loading: false,
      current_page: null,
    }),
    getters: {
      getCategoryId: state => state.current_page
    },
    actions: {
      ...useStoreActions(),
      async saveCurrentPage: id => {
        // post to API...
      }
    }
  }
}

You can then reffer to the state like this:

// In the component
import { toRef } from 'vue'}
import { Page } from 'wherever'

const loading = toRef(Page.piniaStore(), 'loading')

// mutate the loading state
loading.value = true

// access state in the Repo
const current_page = this.piniaStore().current_page

[raizdev]

@Derranion If I correctly understand the issue, you should be able to achieve your goal with the following pattern:

import { Model, useStoreActions } from 'pinia-orm'

export class Page extends Model {
  static entity = 'Page'

  static fields () {
    return {
      id: this.uid(''),
      category_id: this.attr(''),
    }
  }

  static piniaOptions = {
    state: () => ({
      data: {},
      loading: false,
      current_page: null,
    }),
    getters: {
      getCategoryId: state => state.current_page
    },
    actions: {
      ...useStoreActions(),
      async saveCurrentPage: id => {
        // post to API...
      }
    }
  }
}

You can then reffer to the state like this:

// In the component
import { toRef } from 'vue'}
import { Page } from 'wherever'

const loading = toRef(Page.piniaStore(), 'loading')

// mutate the loading state
loading.value = true

// access state in the Repo
const current_page = this.piniaStore().current_page

Question, how can I update the fields inside the model from piniaOptions

[CodeDredd]

Question, how can I update the fields inside the model from piniaOptions

What do you mean with this question? Because how the fields are mutated is shown.
Ahhh... i think i understand what you mean.
Inside model you should be able to access the piniaOptions through in a static statemant directly through this.piniaOptions or in a non static statemant through this.$piniaOptions()

[Derranion]

Thanks for the replies I ended up with just creating a static variable with a ref inside of the class.

Here is an example:

import { Model } from 'pinia-orm'
import { ref } from 'vue'

export default class AnyName extends Model {
    ...
    static state = ref({
        loading: false,
        total: 0,
    })
    ...
}