myskypesla

module federation
https://webpack.js.org/concepts/module-federation/

как раз сегодня видео смотрел хех
https://www.youtube.com/watch?v=E3NHd-PkLrQ
про федерацию в последней части, последние минут 10, выглядит впечатляюще да

это не "аналог", а именно возможность нового вебпака собирать куски кода как модули, которые потом можешь импортить напрямую в сторонние аппы как "компоненты"

Вычисляемое свойство будет представлять собой объект из стейта, завёрнутый в Proxy, чтобы перехватывать установку значений свойств и вызывать мутацию:

user() {
  return new Proxy(this.$store.state.user, {
    set: (target, prop, value) => {
      this.$store.commit('updateUser', { [prop]: value });
      return true;
    },
  });
},

Соответственно, сама мутация:

updateUser(state, payload) {
  Object.assign(state.user, payload);
},

https://jsfiddle.net/jgv3h15k/

Ответ 1:

1. Импортируешь Provider в файл index.js, чтобы не пробрасывать props через каждый дочерний компонент:
   import { Provider } from "mobx-react";
   
2. В файле index.js оборачиваешь компонент рендеринга в Provider:
   

   ReactDOM.render(<Provider store={store}>
       <App />
     </Provider>, document.getElementById('root'));

3. Импортируешь inject в нужный компонент, где нужно использовать тебе store:
   import { inject } from "mobx-react";
   
4. Если классовый компонент, можешь повесить @inject("store") перед объявлением класса, где значение в скобках — название твоего пропса, который ты передаешь в Provider в index.js:
   

   import React, { Component } from 'react';
   import { inject } from "mobx-react";
   
   @inject("store")
   class Form extends Component {
     render() {
       return (
         <form className="form">
           <select>
             <option></option>
           </select>
         </form>
       );
     }
   }
   
   export default Form;

5. Если компонент функциональный, то можно сделать так:

   import React from "react";
   import { inject } from "mobx-react";
   
   const App = () => {
     return <div className="App">Hello World!</div>;
   };
   
   export default inject("store")(App);

   
   
   

Ответ 2:

1. Теперь доступ к store есть из любого компонента, который находится в дереве Provider и на котором повешен @inject("store").
   Чтобы вызвать метод из стора, следуй примеру ниже. Допустим, вызовем метод по нажатию кнопки:

   <button onClick={() => this.props.store.getUsers()}></button>

   И, насколько я понимаю, нужно обернуть вызываемую функцию в стрелочную функцию, то есть: () =>, если нужный метод находится за пределами текущего файла. В твоем случае — да.
   
   Можешь еще сделать деструктуризацию, и обращаться сразу к нужному методу:

   const { getUsers } = this.props.store;
     // какой-то код
   
     return <button onClick={() => getUsers()}></button>;
   };

   
   
   
   

Как то так:

render() {
  this.el = document.querySelector(this.selector)
  this.el.innerHTML = this.template
}

Надо переписать объект sms

someFunction = () => {
      const {sms} = this.state;
      sms.disabled = true;
      this.setState({sms});
}

Таким образом вы обновите поле disabled в sms
--------
Или еще так

someFunction = () => {
      this.setState({sms: {...this.state.sms, disabled: true}});
}

--------
еще так можно

someFunction = () => {
      this.setState(prevState=>({sms: {...prevState.sms, disabled: true}}));
}

Последний вариант самый устойчивый к коллизиям, связанным с изменением стейта в других места программы

Ну или через async / await

async function data() {
  return fetch("https://jsonplaceholder.typicode.com/users")
    .then(response => response.json())
    .then(response => JSON.stringify(response))
};

async function setHTML() {
  document.getElementById("app").innerHTML = await data();
}

setHTML();

https://codesandbox.io/s/mop3pqz94p -- немного поправил. У вас в value заносились ключи на английском, чтобы это работало, у массива elements тоже должен быть массив с ключами на английском. сейчас реализовал то же самое но с русскими названиями

Можно сделать проверку на блоке а-ля

<div v-if="data"> ... </div>
<div v-else>Крутящийся прелоадер :)</div>

Показывать до загрузки данных прелоадер или плейсхолдер.

выше ответ правильный. Еще бы посоветовал вам почитать документацию и Лейзи лоадинг... (быстрее грузится будет). + ко всему этому убедитесь что стили прогружаются в head и скрипт по выше поставьте. И чтоб все не прыгало желательно вычислить минимальную высоту слайдера и прописать min-height

Это по той причине, что сначала грузится разметка слайдера (картинки, блоки), а потом уже стили и скрипты слайдера (которые делают его слайдером).
Можете попробовать спрятать блок со слайдером, а после вызова плагина слайдера показывать его.

const data = {
  phone: this.phone.replace(/\D/g, ''),
  password: this.password,
};

на счет маленьких функций не знаю, возможно привычка, а вообще для того, чтобы сохранить ссылку на объект vue и использовать её где-то внутри функции, где this будет ссылаться на область видимости самой функции

methods: {
  someFunc() {
    const vm = this

    // _ = lodash
    _.each([1,2,3], function(...args) {
      // this == function(){}
      // vm == vue

    })
  }
}

Как-то так: https://codepen.io/anon/pen/KREdoG