Vuex 状态不会被通用函数改变，而专用函数会改变它答案

【问题标题】：Vuex state is not mutated by a general function whilst a dedicated function does mutate itVuex 状态不会被通用函数改变，而专用函数会改变它
【发布时间】：2018-01-04 15:37:05
【问题描述】：

我有一个 LokiJS 提供的存储，我用它来使用 autoloadCallback 中的突变来更新 Vuex 状态。

LokIJS 存储：

var db = new loki('mydatabase', {
  autoupdate: true,
  autoload: true,
  autoloadCallback: setupHandler
})

Vuex 状态和突变：

const state = {
  ads: []
}

const mutations = {
  updateArray(from, to) {
      from = to
  },
  updateAds() {
      state.ads = db.getCollection('ads').data
  }
}

还有回调本身：

function setupHandler() {
  setupCollection('ads') // Just sets up the collection if it doesn't exist
  db.getCollection('ads').insert({dummy: "Dummmy!"})

  mutations.updateArray(state.ads, db.getCollection('ads').data)
  mutations.updateAds()    
}

这里的问题是调用updateArray(state.ads, content) 不会将state.ads 更改为content，但是updateAds() 函数本质上做同样的事情，只是不接受参数并将它们硬编码，并相应地更改state.ads。

我为 updateArray 编写通用函数的方法的根本问题是什么？有什么办法吗？

这是此行为的JSFiddle MCVE example。

【问题讨论】：

您不能像在updateArray 中那样直接替换状态，其中from 实际上是state。如果要替换完整状态，则需要使用 store 实例的 replaceState 方法。此外，您并没有真正按预期使用 Vuex。突变旨在接收状态对象，突变应通过存储提交。
@Bert：虽然我不想替换整个状态。我在该州有很多数组（只是为了简化它而将其剥离），我只需要更新非常具体的数组。有办法吗？
@Bert：我正在使用它，就像您在组件中描述的那样，但是，我需要先从 LokiJS 数据库加载数据。有没有惯用的方法？
如下所示，您可以在不使用this.$store 的情况下调用商店中的方法，您只需要引用商店对象即可。所以outside一个组件，你会像inside组件那样做，这只是你如何到达商店的问题。
通常您导出商店对象，然后将其导入您需要的地方。

标签： javascript vue.js vuejs2 vuex lokijs

【解决方案1】：

在不知道loki的具体情况的情况下，我认为您需要进行以下更改。

你的变异应该是这样的：

const mutations = {
  updateArray(state, to) {
      state.ads = to
    }
}

你的 setupHandler 函数应该是这样的：

function setupHandler() {
  setupCollection('ads')
  db.getCollection('ads').insert({dummy: "Dummmy!"})

  store.commit('updateArray', db.getCollection('ads').data)
}

突变是接受状态作为第一个参数，以及包含参数作为第二个参数的对象参数的函数。应该使用商店的commit 方法提交突变。

这是你的fiddle updated。

【讨论】：