我正在嘗試觀察 vuex 中狀態的變化。狀態是一個陣列。我通過按下按鈕來更改該陣列的值。每當我按下那個按鈕并且陣列（vuex 狀態）發生變化時，我想在螢屏上的串列中顯示這些值。
這是主要的 vuex 商店：
import { createStore } from 'vuex';
import rollingModule from './modules/rolling/index.js';
const store = createStore({
modules: {
rolling: rollingModule,
},
});
export default store;這是我的 vuex 商店模塊：
export default {
namespaced: true,
state() {
return {
numbers: [0, 0, 0, 0, 0],
};
},
mutations: {
rollDice(state, payload) {
state.numbers = payload;
},
},
actions: {
rollDice(context) {
const rolledNumbers = [];
for (let i = 0; i < 5; i ) {
rolledNumbers.push(Math.floor(Math.random() * 7));
}
context.commit('rollDice', rolledNumbers);
},
},
getters: {
getNumbers: (state) => state.numbers,
},
};我的第一次嘗試是使用計算屬性對更改做出反應，但這似乎不起作用。然后我為該計算屬性添加了一個觀察者到 console.log 舊值和新值，但觀察者似乎永遠不會被解雇。
這是我的組件代碼：
<template>
<ul>
<li v-for="number in rolledNumbers" :key="number">
{{ number }}
</li>
</ul>
</template>
<script setup>
import { computed, watch } from 'vue';
import { useStore } from 'vuex';
const store = useStore();
const rolledNumbers = computed(() => {
store.getters['rolling/getNumbers'];
});
watch(rolledNumbers, (newValue, oldValue) => {
console.log('Old Array: ' oldValue);
console.log('New Array: ' newValue);
});
</script>
我已經閱讀了一些關于深度觀察者來觀察陣列值的變化，但我找不到任何對組合 api 和 .
編輯 1：當嵌套元素更改時，我的觀察者現在會觸發。這是代碼：
watch(
rolledNumbers,
(newValue, oldValue) => {
console.log('Old Array: ' oldValue);
console.log('New Array: ' newValue);
},
{ deep: true }
);
不幸的是 oldValue 和 newValue 都回傳 undefined。
uj5u.com熱心網友回復：
您的突變正在用numbers一個全新的陣列替換陣列。這意味著對陣列的參考丟失，破壞了反應性：
rollDice(state, payload) {
state.numbers = payload;
}
您需要替換陣列的內容以保留參考。你可以這樣做：
rollDice(state, payload) {
# Remove all items from the array
state.numbers.length = 0
# Fill the array with the items from the payload array
[].push.apply(state.numbers, payload)
}
轉載請註明出處，本文鏈接：https://www.uj5u.com/ruanti/395501.html