vue.js 使用组合 api 和 sfc 在 vuex 中观察数组状态变化

Question

我正在尝试观察 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>

我读过一些关于 deep watchers 的内容，以观察数组值的变化，但我找不到任何对组合 api 和 .

有用的东西

编辑 1：当嵌套元素发生变化时，我的观察者现在会触发。这是代码：

watch(
  rolledNumbers,
  (newValue, oldValue) => {
    console.log('Old Array: ' + oldValue);
    console.log('New Array: ' + newValue);
  },
  { deep: true }
);

不幸的是 oldValue 和 newValue 都 return 未定义。

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

vue.js 使用组合 api 和 sfc 在 vuex 中观察数组状态变化

vue.js watching array state change in vuex using composition api and sfc

vue.js

vuex

vue-composition-api

vue-sfc