Nuxt - api композиции и наблюдатели

Я пытаюсь следить за некоторыми предупреждениями в моем компоненте

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/


vue.js nuxt.js vuejs3 vuejs2 vue-composition-api
person AlexanderDavidson    schedule 01.12.2020    source источник

Ответы (1)


arrow_upward
2
arrow_downward

Поскольку activeWarnings является массивом, вы должны добавить параметр immediate:true:

 const { activeWarnings } = useWarning();

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

or

 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
    });
person Boussadjra Brahim    schedule 01.12.2020
comment
Большое спасибо, это работает - интересно, что Тони опубликовал этот codesandbox.io/ s / именно то, что у меня было. - person AlexanderDavidson; 02.12.2020
comment
пожалуйста ! - person Boussadjra Brahim; 02.12.2020