Aetae

Vue.component('style-slot', {
  functional: true,
  render(h, {scopedSlots, data}) {
    if (!scopedSlots.default) return;
    const map = ['class','staticClass','style','staticStyle'];
    const elements = scopedSlots.default();
    return elements.map(vNode => {
      if (!vNode.tag) return vNode;

      let vData;
      if (vNode.data) {
        vData = Object.assign({}, vNode.data);
        map.forEach((key, i) => {
          const dataKey = map[i - i % 2];
          if(key in data) {
            if(dataKey in vNode.data) {
              vData[dataKey] = Array.isArray(vData[dataKey])
                ? vData[dataKey].concat(data[key]) 
              : [vData[dataKey], data[key]];
            }
            else
              vData[dataKey] = data[key];
          }
        });
      } else {
        vData = map.reduce((obj, key, i) => {
          if(key in data)
            obj[key] = data[key];
          return obj
        }, {});
      }
      return h(vNode.tag, vData, vNode.children || vNode.text)
    })
  }
})

<template>
  <div>
    <style-slot class="sl-sl" style="border:2px">
      <slot/>
    </style-slot>
  </div>
</template>

<template>
  <div>
    <slot className="slot-class"/>
  </div>
</template>

<template>
  <component-a v-slot="{className}">
    <p :class="['p-class', className]">text</p>
  </component-a>
</template>

computed: {
  getterResult() {
    return this.$store.getters[this.getter]
  }
}

state.books.filter((book: { id: string }) => book.id !== id)

interface Book {
  id: string;
  // ...
}
state.books.filter((book: Book) => book.id !== id)

interface Book {
  id: string;
  // ...
}
interface State {
  books: Book[];
  // ...
}
const state: State = ...

state.books.filter(book => book.id !== id)

:style="`background: url(${require('@/assets/images/image.jpeg')}) no-repeat center`"

for(let [key, value] of Object.entries(localStorage)) {
  console.log(key, value)
}

<ul class="nav flex-column nav-pills side-nav" id="v-pills-tab" role="tablist" aria-orientation="vertical">
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/foodmenu">Перспективное меню</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/journal">Журнал питания</router-link>
  <router-link tag="li" class="list-group-item" active-class="activ" to="/nutrition/ambarbook">Амбарная книга</router-link>
</ul>