使用 v-model 在 Vue-Electron 应用程序启动时初始化 vuex 存储数据答案

【问题标题】：Initialize vuex store data at startup in a Vue-Electron App using v-model使用 v-model 在 Vue-Electron 应用程序启动时初始化 vuex 存储数据
【发布时间】：2020-01-23 08:14:11
【问题描述】：

我也在尝试构建我的第一个 electron-vue 应用程序。对于我的状态数据，我使用的是vuex。

我正在为一些bootstrap-vue 表单使用双向绑定。在程序开始时，我想将这些表单的值初始化为默认的表单程序逻辑或从配置文件中读取的值。但是在这里我正在为我的代码而苦苦挣扎。存储数据已更新（在我的示例中设置为 true），但未选中 b-form-checkbox。我就是不明白为什么？

这是我的组件代码：

<template>
  <div>
    <b-form-checkbox
      v-model="saveOriginalImage"
    > Save Original Image
    </b-form-checkbox>
  </div>
</template>

<script>
  export default {
    data() {
      return {
      }
    },
    computed: {
        saveOriginalImage: {
        get() {
          return this.$store.getters.GET_SAVE_ORIGINAL_IMAGE;
        },
        set(value) {
          this.$store.dispatch('setSaveOriginalImage', value);
        }
    }
  }
}
</script>

我的商店.js

const state = {
  SaveOriginalImage: false,
}

const getters = {
  GET_SAVE_ORIGINAL_IMAGE: state => {
    return state.SaveOriginalImage;
  },

const mutations = {
  SET_SAVE_ORIGINAL_IMAGE (state, payload) {
    state.SaveOriginalImage = payload;
  },
}

const actions = {
  init ({ commit }) {
    commit('SET_SAVE_ORIGINAL_IMAGE', true);
  },

  setSaveOriginalImage ({ commit }, payload) {
    console.log("Action: setSaveOriginalImage payload = " + payload)
    commit('SET_SAVE_ORIGINAL_IMAGE', payload)
  },
}

export default {
  state,
  getters,
  mutations,
  actions
}

我正在 index.js 中的 app.on 事件中初始化存储数据

app.on('ready', () => { 
  store.dispatch('init'); 
  createWindow();
}

【问题讨论】：

标签： vue.js electron vuex

【解决方案1】：

我找到了使用 setTimeout 的解决方法：

app.on('ready', () => { 
  setTimeout(() => {
    store.dispatch('init'); 
  }, 2500);
  createWindow();
}

对我来说，这似乎是一个时间问题，我尝试了 browserWindow 事件 ready-to-show 和其他一些方法来获得正确的时间来调用我的 store init 函数，但没有任何效果。

【讨论】：