Моя основная проблема заключается в том, что я пытаюсь реактивно добавлять данные либо в корневой каталог Vue, либо в компонент Vue. Причина этой проблемы заключается в том, что после подключения моего экземпляра приложения Vue (с помощью app.mount ()) я не могу реактивно добавлять данные в приложение Vue. Я пытаюсь использовать Vue вместе с vanilla JS, поскольку я новичок в этой структуре. Я думаю, что на самом деле все сводится к следующему… есть ли какое-либо событие, которое я мог бы вызвать, или объект, который я мог бы вызвать в vanilla JS, чтобы вставить новые данные, скажем, в массив объектов в экземпляре приложения Vue?

Самый простой способ-установить Vuex приложение vue 3 и ввести данные через магазин vuex.

Вот простой, простой проект vue3, созданный из vue-cli с помощью команды 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))...  } }  

И 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;   

• предоставьте экземпляр приложения vue(window.vueApp) для доступа из внешнего javascript.

К магазину Vuex можно получить такой доступ.

 // external.js const store = window.vueApp.config.globalProperties.$store /*  * can inject(modify, delete, etc) data into vue app through `store`  */  

ДЕМОНСТРАЦИЯ

Массив определяется в хранилище vuex следующим образом

 // 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: {}, });  

• Массив nums должен быть отрисован в App.vue

Доступ к массиву nums можно получить из компонента App.vue .

 lt;templategt;  lt;img alt="Vue logo" src="./assets/logo.png" /gt;  lt;ulgt;  lt;li v-for="(n, index) in $store.state.nums" :key="index"gt;{{ n }}lt;/ligt;  lt;/ulgt; lt;/templategt;  

• $store.state.nums является массивом [0, 1, 2]
• li отображается с текстом (0, 1, 2)

Номера массивов могут быть обновлены из внешних js

 // external.js const store = window.vueApp.config.globalProperties.$store store.commit('replaceNum', [2, 3, 5, 7, 11]);  

• commit('replaceNum', ...) — вызов метода replaceNum в мутациях. Он обновляется nums , и содержимое также обновляется.