[Vuejs]-How to make a exported variable reactive in Vue 3 / Nuxt 3?

by

1👍

✅

you have to make it a react proxy using react system (ref, shallowRef, reactive, shallowReactive, triggerRef…)

// test.js
import { reactive } from "vue"

export const count = reactive({
  total: 0,   // <-- make reactive in template
});

export const addCount = () => {
  count.total++;
};

<script setup>
import { count, addCount } from '~/assets/functions/test';
import { computed } from 'vue';

const totalCount = computed(() => count.total)
</script>

<template>
  <h1>{{ totalCount }}</h1>
  <button @click="addCount()">Add+</button>
</template>
👤Tachibana Shin

Leave a comment