vue.js - Vue3 看 Vuex4 存储不运行回调函数

Question

我刚开始使用 Vue 3，我正在尝试观察商店的状态变化，它是用 Vuex 构建的。

由于某种原因，它没有按预期工作。

<script lang="ts">
    import { onMounted, computed, watch } from 'vue';
    import { useStore } from 'vuex';

    import LineDrawer from '../helper/LineDrawer';

    export default {
      setup() {
        const store = useStore();
        const lines = computed(() => store.state.lines.length);

         onMounted(() => {
           new LineDrawer();

           setTimeout(() => store.commit('push'), 1000);
          });

          watch(() => lines, () => {
           console.log('lines changed');
          });

          return {
            lines,
          };
     },
    };
</script>

Answer 1

该watch函数可以将 aref作为参数并computed返回一个响应式ref。

JSFiddle 示例

// ...

        watch(lines, () => console.log('lines changed'));

// ...

Answer 2

由于您正在观看一个数组，您应该添加{deep:tree}选项：

  watch(() => lines, () => {
       console.log('lines changed');
      },{
        deep:true
     });