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'
})