1

我正在尝试观察 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 都返回未定义。

4

1 回答 1

1

您的突变正在用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)
}
于 2021-12-25T13:41:19.930 回答