Nuxt - 组成 api 和观察者

Question

我正在尝试观察组件中的一些警告

import VueCompositionApi, { watch } from '@vue/composition-api';
import useWarning from '@composables/warnings';

Vue.use(VueCompositionApi);

setup () {

    const { activeWarnings } = useWarning();

     watch(activeWarnings, () => {
      
        console.log('called inside on update')
    });

    }

在我的组合函数中，我只是推入反应数组来模拟警告。

import { reactive } from '@vue/composition-api';

export default function useWarnings () {

  const activeWarnings = reactive([]);

  setInterval(() => {
    fakeWarning();
  }, 3000);


  function fakeWarning () {
    activeWarnings.push({
      type: 'severe',
      errorCode: 0,
      errorLevel: 'red',
    
    }
);
  }
 return { activeWarnings };

这在 Vue 2 中根本不起作用吗？有解决方法吗？ activeWarnings 确实在我的组件中更新 - 我看到数组已满，但从未调用此观察器。

我正在使用https://composition-api.nuxtjs.org/

Answer 1

因为 activeWarnings 是一个数组，你应该添加 immediate:true 选项：

 const { activeWarnings } = useWarning();

     watch(activeWarnings, () => {
      
        console.log('called inside on update')
    },{
     immediate:true
    });

或

 const { activeWarnings } = useWarning();

     watch(()=>activeWarnings, () => {
      
        console.log('called inside on update')
    },{
     immediate:true
    });

但我推荐以下语法：

import { reactive,toRef } from '@vue/composition-api';

export default function useWarnings () {

  const state= reactive({activeWarnings :[]});

  setInterval(() => {
    fakeWarning();
  }, 3000);


  function fakeWarning () {
   state.activeWarnings.push({
      type: 'severe',
      errorCode: 0,
      errorLevel: 'red',
    
    }
);
  }
 return { activeWarnings : toRef(state,'activeWarnings')};

然后 :

 const { activeWarnings } = useWarning();

     watch(activeWarnings, () => {

        console.log('called inside on update')
    },{
     immediate:true
    });

Nuxt - 组成 api 和观察者

Nuxt - composition api and watchers

vue.js

vuejs2

nuxt.js

vuejs3

vue-composition-api