时间戳

首页 > 解决方案 > 使用 v-model 在 Vue-Electron App 启动时初始化 vuex 存储数据

vue.js - 使用 v-model 在 Vue-Electron App 启动时初始化 vuex 存储数据

问题描述

我也在尝试构建我的第一个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.jselectronvuex

解决方案

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

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

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

推荐阅读