Vuex Electron: исключение при совершении мутации - PullRequest
Новая
       37

Vuex Electron: исключение при совершении мутации

0 голосов
/ 30 ноября 2018

Я пишу приложение Electron, используя Vue и Vuex.

Мой магазин выглядит следующим образом (counter.js): 

const state = {
  main: 5
};

const mutations = { // synchronous tasks
  INCREMENT_MAIN_COUNTER (state) {
    state.main++;
  }
};

const getters = {
  count: (state) => {
    return state.main;
  }
};

export default {
  state, getters, mutations
}

Мой компонент Vue выглядит следующим образом (LandingPage.vue): 

<template>
  <div id="count-box">
    {{count}}
    <button @click="pressed">Increment counter</button>
  </div>
</template>

<script>
  import counter from '../store';

  export default {
    name: 'landing-page',
    computed: {
      count: () => {
        return counter.getters.count;
      }
    },
    methods: {
      pressed: () => {
        counter.commit('INCREMENT_MAIN_COUNTER');
      }
    }
  };
</script>

Когда я нажимаю кнопку для увеличения, вызывается commit и вызывается следующее исключение: 

Uncaught Error: [Vuex Electron] Please, don't use direct commit's, use dispatch instead of this.
    at Store.store.commit (.../node_modules/vuex-electron/dist/shared-mutations.js:1)
    at VueComponent.pressed (LandingPage.vue?b116:20)
    at invoker (vue.esm.js?a026:2027)
    at HTMLButtonElement.fn._withTask.fn._withTask (vue.esm.js?a026:1826)

Я не совсем понимаю, что моглобыть причиной этого, как я следовал https://www.youtube.com/watch?v=LW9yIR4GoVU и https://vuex.vuejs.org/guide/mutations.html, которые, кажется, делают это таким образом.

1 Ответ

0 голосов
/ 16 января 2019

Обратите внимание, что вы, вероятно, используете vuex-Electron , чтобы разделить хранилище vuex между всеми процессами (включая основной).

README.md * проекта1006 * ясно об этом:

В процессе рендеринга для вызова действий вам нужно использовать dispatch или mapActions.Не используйте коммит, потому что действия, выполняемые через коммит, не будут разделены между процессами.

Я полагаю, причина этого в том, что Vuex Electron использует ipcMain и ipcRenderer для связи между основными процессами и процессами визуализации, и оба API являются асинхронными.Суть в том, что мутации должны быть чистыми функциями и не иметь побочных эффектов, тогда как действия имеют.

Я получаю ту же ошибку при обновлении существующей кодовой базы для использования последней версии Electron-Vue , который теперь использует Vuex Electron.В зависимости от ваших потребностей, вы можете удалить Vuex Electron, если вам не нужно делить свой магазин с другими процессами, или добавить «прокси» действия, которые вызывают мутации.

Подробнее в документации vuex:

...