Как поймать ошибку типизации в Pinia store, Vue3?

Question

[Андрей Чирков]

import { defineStore } from "pinia"

export interface MainStore {
  isOverlayShow: boolean
  isBurgerOpen: boolean
}

export const useMainStore = defineStore({
  id: "main",
  state: (): MainStore => ({
    isOverlayShow: false,
    isBurgerOpen: false,
  }),
  actions: {
    // setOverlayShow(bool: boolean): void {
    //   this.isOverlayShow = bool
    // },
    setOverlayShow(bool: boolean): void {
      this.isOverlayShow = 'bool' // <- no ERROR
    },
    setBurgerOpen(bool: boolean): void {
      this.isBurgerOpen = bool
    }
  },
  getters: {

  }
})

Как затипизировать это место?

Comments

[Антон Антон]

Не касаясь ответа на вопрос - зачем тут эти функции-сеттеры?

[Максим Морев]

К автору - разобраться с настройками компилятора?
Ошибка есть. Или я неправильно понимаю, что требуется?



Антон Антон несмотря на то, что Pinia позволяет менять state напрямую, многим это не нравится.
Вот здесь подробнее об этом.

[Антон Антон]

Максим Морев, но ведь использование composition синтаксиса pinia позволяет закрыть нежелательные для одиночного изменения вещи (коих как правило меньшинство) и не писать при этом кучу однострочных сеттеров

[Максим Морев]

Антон Антон, я не понимаю, о чём речь, но есть ощущение, что мы говорим о разном.

Если речь идёт об создании стора Pinia в виде, аналогичном setup, то после это отдельного экспорта ничего не мешает в коде сделать
counter.value = 12345;

Не экспортировать counter? Так его в шаблоне надо вывести. У автора на эти флажки наверняка условная отрисовка.

[Антон Антон]

Максим Морев, В таком случае нужно то, что должно быть недоступно для атомарного изменения экспортировать в виде чего-то только для чтения, например computed, он же getter в options синтаксисе. Ну и, вроде, typescript позволяет хинты расставить.
Повторюсь, недоступные для атомарного изменения вещи обычно малая часть всего стейта.

[Андрей Чирков]

Максим Морев, Даже не думал, что так может быть. Потому что стоит свежий WebStorm c почти не тронутыми настройками, возможно в оболочке Nuxt 3 что то не так. Буду в эту сторону смотреть

Answer 1

[Антон Антон]

Может быть лучше воспользоваться setup-синтаксисом? https://pinia.vuejs.org/core-concepts/#setup-stores

Comments

[Андрей Чирков]

Хз как я его попустил в доке, работает, и даже синтаксис ближе

[Aetae]

Андрей Чирков, даже если ты в итоге на функциональную версию перейдёшь(что, имхо, именно для хранилища - хрень), тебе всё равно стоит обновить typescript: сейчас потестил - хитрые типы pinia не работают только до ts 4.1, а сейчас уже 4.8.)

[Андрей Чирков]

Aetae, я чет думал TS 4.7.4 должен вывезти это)
Функциональная версия это какая?)
Мне этот setup синтаксис нравится потому что на композишн апи похож