Vuex通用updateArray函数无法修改state，专用函数却可行，问题何在？

这是个非常典型的JavaScript参数传递逻辑结合Vuex响应式机制的问题，我来一步步帮你理清：

为什么updateArray失效，updateAds却能生效？ #

1. JavaScript的参数传递本质：按值传递（引用类型传递的是引用副本） #

你写的updateArray(from, to)函数里，from接收的是state.ads的引用副本。当你执行from = to时，只是把函数内部的局部变量from指向了新的数组（to），但原来的state.ads还是指向旧的数组引用——这个操作完全没有触及到state对象本身的属性，所以外部的state.ads自然不会变化。

而updateAds()是直接操作state.ads，把它的引用替换成了LokiJS返回的新数组db.getCollection('ads').data，这个操作直接修改了state对象的属性，所以Vuex的响应系统能捕捉到变化，状态也就更新了。

2. Vuex mutations的规范问题 #

另外你当前的mutations写法其实不符合Vuex的规范：Vuex的mutations函数第一个参数必须是state，而不是自己手动传state.ads。你当前的updateAds能生效是因为闭包引用了外部的state变量，但这不是Vuex推荐的写法，也不利于维护。

通用updateArray的正确实现方式 #

要实现一个通用的数组更新mutations，核心是直接操作state对象的属性，而不是传递数组本身。这里有两种常见的可行方案：

方案一：基于属性名的通用更新 #

const state = { ads: [] }
const mutations = {
  // 通用数组更新：接收state、属性名、新数组值
  updateArray(state, { prop, newValue }) {
    // 直接替换state对应属性的引用，Vue能检测到数组引用变化
    state[prop] = newValue;
    
    // 如果需要保留原数组的引用（比如某些场景下依赖原数组的响应式绑定），可以用splice清空后替换：
    // state[prop].splice(0, state[prop].length, ...newValue);
  },
  // 符合Vuex规范的updateAds
  updateAds(state) {
    state.ads = db.getCollection('ads').data;
  }
}

调用的时候这样写：

function setupHandler() {
  setupCollection('ads')
  db.getCollection('ads').insert({dummy: "Dummmy!"})
  // 调用通用mutations，指定要更新的属性名和新值
  mutations.updateArray(state, { 
    prop: 'ads', 
    newValue: db.getCollection('ads').data 
  })
}

方案二：针对数组的批量更新（保留原引用） #

如果你不想替换数组的引用，而是希望在原数组基础上更新内容（比如避免组件重新渲染），可以用splice方法：

const mutations = {
  updateArray(state, { prop, newValue }) {
    const targetArray = state[prop];
    // 清空原数组，然后批量插入新元素
    targetArray.splice(0, targetArray.length, ...newValue);
  }
}

这种方式会修改原数组的内容，Vue的响应系统同样能检测到变化，因为splice是Vue能追踪到的数组变异方法。

关键总结 #

1. 永远不要试图通过修改mutations的参数来改变state——JS的参数传递机制会让这种操作失效，必须直接操作state对象的属性。
2. 遵循Vuex的规范：mutations的第一个参数必须是state，这是最安全、最易维护的写法。
3. Vue的响应式系统只能检测到对象属性的引用变化或者数组的变异方法调用，直接修改参数变量不会触发任何更新。

内容的提问来源于stack exchange，提问作者sjaustirni