<template>
  <nav class="navbar navbar-expand-lg bg-body-tertiary">
    <div class="container-fluid">
        <div class="collapse navbar-collapse" id="navbarNav">
            <ul class="navbar-nav col-md-10 offset-md-1">
                <li v-for="(path,index) in $store.state.user.path" :key="index" @click="jump(index)" class="nav-item">
                    <a class="nav-link" href="#">{{ path }}</a>
                </li>    
            </ul>
        </div>
    </div>
    </nav>
</template>


<script>
import { useStore } from 'vuex'

export default {
  name: 'PathBar',
  setup(props,context){
      let store = useStore();

      const jump = (index) => {
        while (store.state.user.path.length > index + 1) {
            store.commit('backPath');
        }
        context.emit('ls');
      }

      return {
          store,
          jump,
      }
  }
}
</script>
