0xD34F

изменяя что-то в одном компоненте, меняется во всех

При клике на элемент - я сохраняю текущий элемент в store vuex и перехожу по роуту...

state: {
  user:{
    name:'',

updateName(state, name){
  state.name=name;

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

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

<input v-model="user.name">
<input v-model="user.surname">
<input v-model="user.email">
<input v-model="user.phone">

this.$store.commit('updateProduct', {
  product: product.options,
  data: {
    isFree: true,
  },
});

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);
},

this.$store.dispatch({type:'ADD_CONTACT'}, payload)

actions:{
    addContact:

this.$store.dispatch({
  type: 'addContact',
  payload,
});

actions: {
  addContact: ({ commit }, { payload }) => commit('ADD_CONTACT', payload),
},

получает следующие аргументы <...> При определении в модуле

state,       // при использовании модулей — локальный state модуля
getters,     // локальные геттеры текущего модуля
rootState,   // глобальный state
rootGetters  // все геттеры

Первое, что нужно знать — store.dispatch может обрабатывать Promise, возвращаемый обработчиком действия, и также возвращает Promise

console.log(this.$store) - этот экшн видит

spoiler

В хуке App.vue выглядит не очень уместно, хочется вынести эту логику в другое место.

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

store.dispatch('получитьДанные').then(() => {
  new Vue({
    el: '#app',
    store,
    router,
    ...

<div v-if="данные в хранилище есть">
  основной контент приложения
</div>
<div v-else>
  данные загружаются, надо подождать
</div>

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

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

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

new Vue({
  store,
  ...

mutations: {
  dialogShow: (state, payload) => Object.assign(state.modals, payload),
},

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

<el-button @click="modals.dialogSignIn = true">sign in</el-button>

<el-dialog :visible="modals.dialogSignIn" @close="modals.dialogSignIn = false">
  <span slot="footer" class="dialog-footer">
    <el-button @click="modals.dialogSignIn = false">Закрыть</el-button>
  </span>
</el-dialog>

store.dispatch('заргузитьДанныеПользователя').then(() => {
  new Vue({ ... });
});

created() {
  this.$store.dispatch('заргузитьДанныеПользователя');
},

<div v-if="$store.state.данныеПользователя">
  контент
</div>
<индикатор-загрузки v-else />

я понял, что нет экшена. Вопрос в том, что он есть )

• Вместо actions засунули его в mutations
  
• Допустили опечатку - вместо actions написали anctions или action или actons или...
  
• Забыли подключить модуль, в котором экшен находится
  
• Неправильно вызываете - экшен находится в namespaced модуле
  
• ...
  

В state.FIELDS.formFieldsMap данные лежат

Действительно, а как тогда быть?

getters: {
  transportFields: state => state.FIELDS.formFieldsMap || [],
  ...