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

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
  },
  setList(state, list: string[]) {

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 {
      state.id = host.id
    }
  },

  setClipboard(state, clipboard: string) {
    state.clipboard = clipboard
  },

  setLocked(state, locked: boolean) {
    state.locked = locked
  },

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)
  },
})

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
    }
  },

  togglePlay(state) {
    if (state.playable) {
      state.playing = !state.playing
    }

import * as remote from './remote'
import * as user from './user'
import * as settings from './settings'
import * as client from './client'
import * as emoji from './emoji'

export const state = () => ({
  displayname: get('displayname', ''),
  password: get('password', ''),
  active: false,
  connecting: false,
  connected: false,
  locked: false,
})

export const mutations = mutationTree(state, {
  setActive(state) {
    state.active = true
  },

  setLogin(state, { displayname, password }: { displayname: string; password: string }) {
    state.displayname = displayname
    state.password = password
  },

  setLocked(state, locked: boolean) {
    state.locked = locked
  },

  setConnnecting(state) {
    state.connected = false
    state.connecting = true

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)
  },

  setIgnore(state, value: boolean) {

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,
    }
  },
  setMembers(state, members: Member[]) {
    const data: Members = {}
    for (const member of members) {
      data[member.id] = {

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) {
    const emotes = {
      ...state.emotes,
    }
    delete emotes[id]