Vuex Graph Data store using Adjacency List

graph-vuex-store.js

import Vue from 'vue'

export default {
  namespaced: true,
  state: {
    adjacencyList: {}
  },
  getters: {
    getVertex: (state, id) => {
      return state.adjacencyList[id]
    }
  },
  mutations: {
    addVertex (state, vertex) {
      if (!state.adjacencyList[vertex]) {
        Vue.set(state.adjacencyList, vertex, [])
      }
    },
    removeVertex (state, vertex) {
      Vue.delete(state.adjacencyList, vertex)
    },
    addEdge (state, { v1, v2 }) {
      state.adjacencyList[v1].push(v2)
      state.adjacencyList[v2].push(v1)
    },
    removeEdge (state, { v1, v2 }) {
      state.adjacencyList[v1] = state.adjacencyList[v1].filter(
        v => v !== v2
      )
      state.adjacencyList[v2] = state.adjacencyList[v2].filter(
        v => v !== v1
      )
    }
  },
  actions: {
    addVertex ({ commit }, vertex) {
      commit('addVertex', vertex)
    },
    removeVertex({ commit }, vertex) {
      while (this.state.graph.adjacencyList[vertex].length) {
        let adjacentVertex = this.state.graph.adjacencyList[vertex][this.state.graph.adjacencyList[vertex].length - 1]
        commit('removeEdge', { v1: vertex, v2: adjacentVertex })
      }
      commit('removeVertex', vertex)
    },
    addEdge ({ commit }, { v1, v2 }) {
      commit('addEdge', { v1, v2 })
    },
    removeEdge ({ commit }, { v1, v2 }) {
      commit('removeEdge', { v1, v2 })
    }
  }
}

GraphDataStructure.vue

<template>
    <div>
        <h1>Data Structure Vuex in Vue</h1>

        <br/>
        <br/>
        <button @click="runMacro">Run Macro</button>
        <br/>
        <br/>
        <br/>

        <input type="text" v-model="newVertexVal" placeholder="New/Delete Vertex"/>
        <button @click="addInputValVertex">Add Vertex</button>
        <button @click="removeInputValVertex">Remove Vertex</button>
        <br/>
        <br/>
        <br/>
        <br/>

        <input type="text" v-model="vertex1" placeholder="Vertex 1"/>
        <input type="text" v-model="vertex2" placeholder="Vertex 2"/>
        <button @click="addInputEdge">Add Edge</button>
        <button @click="removeInputEdge">Remove Edge</button>
        <ul>
          <li v-for="(vertex, key) in graph.adjacencyList" :key="vertex.id">
            <span>{{key}}: {{ vertex }}</span>
          </li>
        </ul>
    </div>
</template>

<script>
import { mapState, mapGetters, mapActions } from 'vuex'

export default {
  components: { },
  data: () => ({
    newVertexVal: '',
    vertex1: '',
    vertex2: ''
  }),
  computed: {
    ...mapState([
      'graph'
    ]),
    ...mapGetters([
      'graph/getVertex'
    ])
  },
  methods: {
    ...mapActions([
      'graph/addVertex',
      'graph/removeVertex',
      'graph/addEdge',
      'graph/removeEdge'
    ]),
    addInputValVertex () {
      this['graph/addVertex'](this.newVertexVal)
    },
    removeInputValVertex () {
      this['graph/removeVertex'](this.newVertexVal)
    },
    addInputEdge () {
      this['graph/addEdge']({v1: this.vertex1, v2: this.vertex2})
    },
    removeInputEdge () {
      this['graph/removeEdge']({v1: this.vertex1, v2: this.vertex2})
    },
    runMacro () {
      this['graph/addVertex']("Dallas")
      this['graph/addVertex']("Tokyo")
      this['graph/addVertex']("Aspen")
      this['graph/addVertex']("Los Angeles")
      this['graph/addVertex']("Hong Kong")
      this['graph/addEdge']({v1: "Dallas", v2: "Tokyo"})
      this['graph/addEdge']({v1: "Dallas", v2: "Aspen"})
      this['graph/addEdge']({v1: "Hong Kong", v2: "Tokyo"})
      this['graph/addEdge']({v1: "Hong Kong", v2: "Dallas"})
      this['graph/addEdge']({v1: "Los Angeles", v2: "Hong Kong"})
      this['graph/addEdge']({v1: "Los Angeles", v2:  "Aspen"})
    }
  },
  created () {

  }
}
</script>

<style lang="scss" scoped>

</style>