How to use the typed-vuex.getterTree function in typed-vuex

import { get, set } from '~/utils/localstorage'

export const namespaced = true

export const state = () => {
  return {
    scroll: get('scroll', 10),
    scroll_invert: get('scroll_invert', true),
    autoplay: get('autoplay', true),
    ignore_emotes: get('ignore_emotes', false),
    chat_sound: get('chat_sound', true),
    keyboard_layout: get('keyboard_layout', 'us'),
  }
}

export const getters = getterTree(state, {})

export const mutations = mutationTree(state, {
  setScroll(state, scroll: number) {
    state.scroll = scroll
    set('scroll', scroll)
  },

  setInvert(state, value: boolean) {
    state.scroll_invert = value
    set('scroll_invert', value)
  },

  setAutoplay(state, value: boolean) {
    state.autoplay = value
    set('autoplay', value)
  },

import { getterTree, mutationTree, actionTree } from 'typed-vuex'
import { Member } from '~/neko/types'
import { EVENT } from '~/neko/events'
import { accessor } from '~/store'

export const namespaced = true

export const state = () => ({
  id: '',
  clipboard: '',
  locked: false,
})

export const getters = getterTree(state, {
  hosting: (state, getters, root) => {
    return root.user.id === state.id
  },
  hosted: (state, getters, root) => {
    return state.id !== ''
  },
  host: (state, getters, root) => {
    return root.user.member[state.id] || null
  },
})

export const mutations = mutationTree(state, {
  setHost(state, host: string | Member) {
    if (typeof host === 'string') {
      state.id = host
    } else {

index: -1,
  tracks: [] as MediaStreamTrack[],
  streams: [] as MediaStream[],
  configurations: [] as ScreenResolution[],
  width: 1280,
  height: 720,
  rate: 30,
  horizontal: 16,
  vertical: 9,
  volume: get('volume', 100),
  muted: get('muted', false),
  playing: false,
  playable: false,
})

export const getters = getterTree(state, {
  stream: (state) => state.streams[state.index],
  track: (state) => state.tracks[state.index],
  resolution: (state) => ({ w: state.width, h: state.height }),
})

export const mutations = mutationTree(state, {
  play(state) {
    if (state.playable) {
      state.playing = true
    }
  },

  pause(state) {
    if (state.playable) {
      state.playing = false
    }

list: string[]
}

export const state = () => ({
  groups: [
    {
      id: 'recent',
      name: 'Recent',
      list: JSON.parse(get('emoji_recent', '[]')) as string[],
    },
  ] as Group[],
  keywords: {} as Keywords,
  list: [] as string[],
})

export const getters = getterTree(state, {})

export const mutations = mutationTree(state, {
  setRecent(state, emoji: string) {
    if (!state.groups[0].list.includes(emoji)) {
      if (state.groups[0].list.length > 30) {
        state.groups[0].list.shift()
      }
      state.groups[0].list.push(emoji)
      set('emoji_recent', JSON.stringify(state.groups[0].list))
    }
  },
  addGroup(state, group: Group) {
    state.groups.push(group)
  },
  setKeywords(state, keywords: Keywords) {
    state.keywords = keywords

[id: string]: Emote
}

interface Message {
  id: string
  content: string
  created: Date
  type: 'text' | 'event'
}

export const state = () => ({
  history: [] as Message[],
  emotes: {} as Emotes,
})

export const getters = getterTree(state, {
  //
})

export const mutations = mutationTree(state, {
  addMessage(state, message: Message) {
    state.history = state.history.concat([message])
  },

  addEmote(state, { id, emote }: { id: string; emote: Emote }) {
    state.emotes = {
      ...state.emotes,
      [id]: emote,
    }
  },

  delEmote(state, id: string) {

import { EVENT } from '~/neko/events'

import { accessor } from '~/store'

export const namespaced = true

interface Members {
  [id: string]: Member
}

export const state = () => ({
  id: '',
  members: {} as Members,
})

export const getters = getterTree(state, {
  member: (state) => state.members[state.id] || null,
  admin: (state) => (state.members[state.id] ? state.members[state.id].admin : false),
  muted: (state) => (state.members[state.id] ? state.members[state.id].muted : false),
})

export const mutations = mutationTree(state, {
  setIgnored(state, { id, ignored }: { id: string; ignored: boolean }) {
    state.members[id] = {
      ...state.members[id],
      ignored,
    }
  },
  setMuted(state, { id, muted }: { id: string; muted: boolean }) {
    state.members[id] = {
      ...state.members[id],
      muted,

import { getterTree, mutationTree, actionTree } from 'typed-vuex'
import { get, set } from '~/utils/localstorage'

export const namespaced = true

export const state = () => ({
  side: get('side', false),
  tab: get('tab', 'chat'),
  about: false,
  about_page: '',
})

export const getters = getterTree(state, {})

export const mutations = mutationTree(state, {
  setTab(state, tab: string) {
    state.tab = tab
    set('tab', tab)
  },
  setAbout(state, page: string) {
    state.about_page = page
  },
  toggleAbout(state) {
    state.about = !state.about
  },
  toggleSide(state) {
    state.side = !state.side
    set('side', state.side)
  },