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')
    });

    }

在我的作文 function 中，我只是推入反應陣列以模擬警告。

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