How to map state using composition API?

[martinszeltins]

With Vuex, it was possible to map state inside of a component but how can I do the same thing with Pina and composition API? I see there is storeToRefs() but how can I get a deeper value from my store like settings.settings.designSettings.logo?

For example, with Vuex it was possibe to map state like this:

  computed: {
    ...mapState({
      settingsLoaded: state => state.settings.loaded,
      settings:       state => state.settings.settings,
      returnOrder:    state => state.returnOrder.returnOrder,
      logoSrc:        state => state.settings.settings.designSettings.logo,
    })
  },

What would be a Pinia / Composition API equivalent?

[posva]

You could just use a computed:

const settings = useSettingsStore()

// other computed
const logoSrc = computed(() => settings.settings.designSettings.logo)

[martinszeltins]

Thanks @posva, I figured it was better to make these as getters in my store to avoid duplicate code.

[posva]

Absolutely!

[lupodellasleppa]

Hi, mapping state with computed works for simple state/getters, but getters with a get/set in the store are not settable from the component if they are mapped using a simple computed variable

e.g

// store.ts
export const useStore = defineStore('store', () => {
  const state = ref(false);
  const mappedState = computed({
    get() {
      return state.value;
    },
    set(value: boolean) {
      state.value = value;
    },
  });

  return {
    mappedState,
  };
});

// component.vue
const store = useStore()

const state = computed(() => store.mappedState)  // e.g. state = true appears to not be working

I don't know if this is the intended behavior, and I know I can probably just rewrite the component's computed mapper as a get/set, but that's just adding boilerplate code and I would probably just go a different apporach at this point.

EDIT: actually, using a get/set computed in the store is not even the designed behavior for a GETter, my bad