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

Question

我有一个 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。

Answer 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。

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

Vuex state is not mutated by a general function whilst a dedicated function does mutate it

javascript

vue.js

lokijs

vuex

vuejs2