Vuejs Vuex state 覆盖外部存储，无需突变或直接访问 state

Question

map() 中 Vuex 覆盖的 State

预期行为 - 单击触发按钮时始终count为 1

当前的行为是每次单击触发按钮时count都在增加，如果我们查看控制台日志，我们可以看到getter返回突变的 state

 const store = new Vuex.Store({ state: { stuff: [{ count: 0 }] }, mutations: {}, getters: { stuff: s => s.stuff, } }) new Vue({ el: '#vue', store, data() { return { res: [] } }, methods: { trigger() { const stuff = this.$store.getters.stuff console.log(stuff) const res = stuff.map(p => { p.count += 1 return {...p } }) this.res = res } }, })

 <script src="https://cdn.jsdelivr.net/npm/vue@2.6.12/dist/vue.js"></script> <script src="https://unpkg.com/vuex@3.6.2/dist/vuex.js"></script> <div id="vue"> <div> <button @click=trigger()>Trigger</button> <pre>{{res}}</pre> </div> </div>

Answer 1

这是意料之中的。 Vuex 只是 JS 虚拟机内部的一个库 - JS 的规则适用......

价值与参考

1. const stuff = this.$store.getters.stuff - stuff现在是对现有 object 的引用（本例中为数组）
2. stuff.map()迭代将每个项目作为p参数传递的数组。 如果p是 Object， p是对 Vuex 内部 object 的引用 - 如果您修改它，您正在修改 Vuex 商店中的 object

这很糟糕，为了确保安全，您可以将 Vuex 设置为在 Vuex 内部的数据被修改而不使用突变时抛出错误

const store = new Vuex.Store({
  // ...
  strict: process.env.NODE_ENV !== 'production'
})