Question

我的Electron + Vue设置遇到一个奇怪的问题。

条件：电子+ Vue（我使用boilerplate）+ vuex-persist（也尝试过vuex-persistedstate和vuex-persistfile）。

问题：当商店重新灌水时，Vuex吸气剂保持0 / null /''。我怎么知道如果本地存储是干净的（我第一次启动该应用程序），则第一个突变会更新状态（getter返回正确的值），并且我可以看到一个对象已添加到浏览器的本地存储中。但是，当应用程序重新启动时，突变会像以前一样触发状态和本地存储更新，但获取器仍为空/默认。在getter下面返回一个空数组。

设置：：我有一个与第三方API配合使用的应用程序：获取数据，计算内容并将部分数据发送回去。 API也需要授权。下面是我的Vuex结构。

我的状态对象的一部分...

const state = {
  token: '',
  projects: [],
  work_packages: [],
  timeEntriesLocal: []
}

...和我的吸气剂之一

const getters = {
  todayLog () {
    function sameDay (d1, d2) {
      return d1.getFullYear() === d2.getFullYear() &&
        d1.getMonth() === d2.getMonth() &&
        d1.getDate() === d2.getDate()
    }
    var entries = state.timeEntriesLocal
    var todayEntries = []
    entries.forEach(element => {
      var date = element.spentOn
      var today = new Date()
      if (sameDay(date, today)) {
        todayEntries.push(element)
      }
    })
    return todayEntries
  }
}

它从数组中返回归因于“ today”的条目。

timeEntriesLocal使用以下方法填充：

addTimeEntry () {
  let entry = {
    id: this.$store.state.UserData.timeEntriesLocal.length + 1,
    project: this.getItemById(this.$store.state.UserData.current.project_id, this.$store.state.UserData.projects),
    spentOn: new Date(),
    comment: this.comment,
    activityId: this.activityId,
    workPackage: this.getItemById(this.$store.state.UserData.current.work_package_id, this.$store.state.UserData.work_packages),
    hours: this.precisionRound(this.$store.state.UserData.duration / 60 / 60, 2),
    published: false,
    loading: false,
    infoMessage: ''
  }

  this.$store.commit('ADD_LOCAL_ENTRY', entry)
}

最后是我上面刚刚使用的突变：

ADD_LOCAL_ENTRY (state, entry) {
  state.timeEntriesLocal.unshift(entry)
}

Answer 1

timeEntriesLocal中的更改未获取，因为您正在更改数组的长度。这是文档的Common Gotchas部分中介绍的JavaScript的局限性。 Vuex`s docs中还介绍了一种解决方法：

突变遵循Vue的反应性规则

由于Vue使Vuex存储的状态具有反应性，因此当我们更改状态时，Vue组件   观察状态将自动更新。这也意味着Vuex   突变在操作时受到相同的反应性警告   普通Vue：


建议使用所有所需字段初始化商店的初始状态   前期。


向对象添加新属性时，您应该：


Use Vue.set(obj, 'newProp', 123)或

用一个新的对象替换该对象。例如，使用对象   扩展语法，我们可以这样写：state.obj = { ...state.obj, newProp: 123 }

因此，在您的示例中，要使Vue（Vuex）检测到这些更改，您可以执行以下操作：

ADD_LOCAL_ENTRY (state, entry) {
    state.timeEntriesLocal.unshift(entry);
    Vue.set(state, 'timeEntriesLocal', state.timeEntriesLocal);
}

从持久性存储中重新存储存储后，不会更新Vuex getter

1 个答案: