Mi principal problema es que estoy tratando de agregar datos de forma reactiva a la raíz de Vue o a un componente de Vue. La razón por la que esto es un problema es porque una vez que se monta mi instancia de la aplicación Vue (usando app.mount()), no puedo agregar datos de forma reactiva a la aplicación Vue. Estoy tratando de usar Vue junto con Vanilla JS ya que soy un novato con el marco. Supongo que todo se reduce a... ¿hay algún evento que pueda desencadenar u objeto al que pueda llamar en Vanilla JS para insertar nuevos datos en, digamos, una matriz de objetos dentro de la instancia de la aplicación Vue?
La forma más fácil es instalar Vuex en su aplicación vue 3 e inyectar datos a través de la tienda vuex.
Aquí hay un proyecto vue3 simple y simple generado a partir de vue-cli con el comando vue create my-vue-prj
{ "name": "my-vue-prj", "version": "0.1.0", "private": true, "scripts": { "serve": "vue-cli-service serve", "build": "vue-cli-service build", "lint": "vue-cli-service lint" }, "dependencies": { "core-js": "^3.6.5", "vue": "^3.0.0", "vuex": "^4.0.0-0" }, "devDependencies": { ...((skipped))... } } Y el punto de entrada src/main.js .
import { createApp } from "vue"; import App from "./App.vue"; import store from "./store"; const app = createApp(App); app.use(store).mount("#app"); window.vueApp = app; // or can expose store directly // window.store = store;Se puede acceder a la tienda Vuex de esta manera.
// external.js const store = window.vueApp.config.globalProperties.$store /* * can inject(modify, delete, etc) data into vue app through `store` */Una matriz se define en la tienda vuex como esta
// file : src/store/index.js import { createStore } from "vuex"; export default createStore({ state: { nums: [0, 1, 2], }, mutations: { replaceNum(state, nums) { state.nums = nums; }, }, actions: {}, modules: {}, });App.vue de matriz quieren ser renderizados en nums Se puede acceder a los App.vue nums
<template> <img alt="Vue logo" src="./assets/logo.png" /> <ul> <li v-for="(n, index) in $store.state.nums" :key="index">{{ n }}</li> </ul> </template>$store.state.nums es una matriz de [0, 1, 2]Los números de matriz se pueden actualizar desde js externo
// external.js const store = window.vueApp.config.globalProperties.$store store.commit('replaceNum', [2, 3, 5, 7, 11]);commit('replaceNum', ...) - método de llamada replaceNum en mutaciones. Actualiza nums y contenidos también se actualiza.