0xD34F

не получается обратиться к геттеру <...> показывает null, хотя если вызвать store.getters, то данные есть

"Показывает null" - значит не успели ещё данные загрузиться к тому моменту, когда вы дёргаете геттер, только и всего. Нечего тут сказки рассказывать про "не получается". Всё окей.

"Хотя" - не более чем особенность отображения объектов в консоли. Когда разворачиваете объект в первый раз, подтягивается его актуальное содержимое. Т.е., в консоль вы store.getters кидаете до получения данных, а смотрите что там есть уже после.

Не хотите в компоненте видеть этот null - не надо рендерить экземпляр компонента, пока данные не будут получены:

<компонент v-if="$store.getters.profile" />

Правда, прямо сейчас вы так сделать не сможете, есть косяк, вот здесь:

//Подключаю хранилище
import store from './store';

store.dispatch('getUser');
new Vue({
    el: '#app',
    router: router,
    components:{
        'head-app':headImplant,
        'footer-app':footer,
        'sidebar-app': sidebar
    }
});

Где подключение-то? Просто импортировать в main.js экземпляр хранилища недостаточно, вы должны передать его в конструктор Vue, как свойство store объекта с настройками:

new Vue({
  store,
  ...

class App extends Component {
  state = {
    users: []
  }

  componentDidMount() {
    fetch('https://jsonplaceholder.typicode.com/users')
      .then(response => response.json())
      .then(users => this.setState({ users }));
  }

  render() {
    return(
      <div className="App">
        <table>
          <tbody>
          {this.state.users.map(n => (
            <tr key={n.id}>
              <td>{n.name}</td>
              <td>{n.username}</td>
              <td>{n.email}</td>
              <td>{n.website}</td>
            </tr>
          ))}
          </tbody>
        </table>
      </div>
    )
  }
}

<select id="person"></select>
<select id="key"></select>
<span id="value"></span>

const data = [
  {
    "ФИО": "Иванов Сергей",
    "Адрес": {
      "Город": "Москва",
      "Улица": "Пятницкая",
      "Дом": "35",
    },
  },
  {
    "ФИО": "Сидоров Иван",
    "Адрес": {
      "Город": "Питер",
      "Улица": "Ленина",
      "Дом": "42",
    },
  },
];


const selects = [
  Select('#person', data.map(n => n['ФИО'])),
  Select('#key', Object.keys(data[0]['Адрес'])),
];

selects.forEach(n => n.addEventListener('change', onChange));


function Select(selector, options) {
  const el = document.querySelector(selector);
  el.append(...options.map(n => new Option(n)));
  el.value = null;
  return el;
}

function onChange() {
  const [ person, key ] = selects.map(n => n.value);
  if (person && key) {
    const value = data.find(n => n['ФИО'] === person)['Адрес'][key];
    document.querySelector('#value').textContent = value;
  }
}

Удалили. Так как не рекомендуется её использовать.

const getUnique = arr => Array
  .from(arr.reduce((acc, n) => acc.set(n, acc.has(n)), new Map))
  .reduce((acc, n) => (n[1] || acc.push(n[0]), acc), []);


const result = getUnique(arr);

или

const getByCount = (arr, checkCount) => Array
  .from(arr.reduce((acc, n) => acc.set(n, -~acc.get(n)), new Map))
  .reduce((acc, n) => (checkCount(n[1]) && acc.push(n[0]), acc), []);


const result = getByCount(arr, count => !~-count);

Устанавливаете null в качестве начальных значений accounts и transactions. В шаблоне добавляете v-if="accounts" и v-if="transactions" тем блокам, внутри которых рендерятся элементы на основе соответствующих свойств.

Является ли нормальной практикой создание нового метода , включающего в себя эти три метода

Если вам надо эти методы вот так вот вызывать в нескольких местах - определённо стоит сделать.

Но если случай единичный, можно просто передать в качестве коллбека функцию, которая будет содержать вызовы нужных методов. Типа так:

buildButton(() => {
  this.drawSomeButtons();
  this.changeSomeVariables();
  this.doSomethingElse();
});

Надо использовать ленивый квантификатор вместо жадного: style=".{0,}?".

https://github.com/search/advanced

Repositories options - Of this size

for (var def = 1; def <= n; n++) {

Может, всё-таки должно быть def++ вместо n++?

Если верить тому, что вы показали в качестве разметки - у вас router-view находится за пределами #app (ну и ещё странность - есть закрывающий тэг header, открывающего нет). Соответственно, отображать компоненты маршрутов попросту негде.

Один x - свойство экземпляра, другой - статический геттер:

class Base {
  constructor() {
    this.x = 3;
  }

  static get x() {
    return 1.5;
  }
}

Классом этой штуке быть не обязательно:

function Base() {
  this.x = 3;
}
Base.x = 1.5;

// или

function Base() {}
Base.prototype.x = 3;
Base.x = 1.5;

UPD. Наконец-то появились статические свойства, а свойства экземпляра стало необязательно инициализировать в конструкторе:

class Base {
  x = 3;

  static x = 1.5;
}

Vue не может отследить прямую установку значения по индексу.

Надо использовать $set, замените

this.steppers[index]=this.steppers[index]+this.step_go

на

this.$set(this.steppers, index, this.steppers[index] + this.step_go)

$str = "философски нагруженная";
preg_match("/.{50}$str.{50}/u", $text, $match);

Получаем массив значений, достаём из него нужный элемент:

const getValue = (obj, index = 0) =>
  Object.values(obj)[index];

Или, перебираем имена свойств, считаем собственные:

function getValue(obj, index = 0) {
  for (const k in obj) {
    if (obj.hasOwnProperty(k) && !index--) {
      return obj[k];
    }
  }
}

Например:

$('.list_add_room').on('click', '.butt_edit', function() {
  const $el = $(this).closest('.item_contain_list').find('p');
  $('.list_add_room [contenteditable="true"]').not($el).removeAttr('contenteditable');
  $el.attr('contenteditable', (i, val) => val !== 'true').focus();
});

Есть ещё и такой вариант - убирать contenteditable при потере фокуса:

$('.list_add_room').on('click', '.butt_edit', function() {
  $(this).closest('.item_contain_list').find('p').attr('contenteditable', 'true').focus();
}).on('blur', '[contenteditable="true"]', function() {
  $(this).removeAttr('contenteditable');
});

Вы пытаетесь назначить обработчик события элементам, которых нет. Нет на момент назначения.

Поставьте код ниже элементов, или оберните его в $(function() { }), или воспользуйтесь делегированием:

$(document).on('change', 'input[type="radio"]', function() {
  $('.color').text($(this).val());
});

я открыл доселе неизвестный it-сообществу баг...

Ага, щас. Десять багов.

... или где-то далеко по мне плачет один учебник по js?

Так точно.

Замените setInterval(this.tick, interval); на

setInterval(this.tick.bind(this), interval);

или на

setInterval(() => this.tick(), interval);

Будем считать, что переменная genre уже в lowercase'е.

document.querySelectorAll('.u-combolist label').forEach(n => {
  if (n.textContent.toLowerCase().indexOf(genre) != -1) {
    n.previousElementSibling.checked = true;
  }
});

или

$('.u-combolist label')
  .filter((i, n) => $(n).text().toLowerCase().includes(genre))
  .prev()
  .prop('checked', true);

const $el = $('.field');
const el = document.querySelector('.field');

Теги должны остаться? Да:

$el.append(document.createTextNode(str));

// или

$el.append(new Text(str));

// или

$el.append(str.replace(/</g, '&lt;'));

// или

el.append(str);

Нет:

$el.append($(str).text());

// или

const div = document.createElement('div');
div.innerHTML = str;
el.insertAdjacentText('beforeend', div.innerText);

// или

el.append(document.createRange().createContextualFragment(str).textContent);

// или

el.append(new DOMParser().parseFromString(str, 'text/html').body.textContent);