如何将按下按钮时的数据添加到Vue 3的根或组件中？

Question

我的主要问题是，我试图被动地将数据添加到Vue根或Vue组件。出现这个问题的原因是，一旦我的Vue应用程序实例被挂载(使用app.mount())，我就无法向Vue应用程序中主动添加数据。我正在尝试使用Vue和vanilla JS，因为我是这个框架的新手。我想真正归结起来的是...有没有什么事件可以触发，或者可以在普通JS中调用对象，以便将新数据插入到Vue应用程序实例中的对象数组中？

Answer 1

最简单的方法是将Vuex安装到您的vue 3应用程序中，并通过vuex商店注入数据。

下面是使用vue create my-vue-prj命令从vue-cli生成的简单、普通的vue3项目

{
  "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 store中定义一个数组，如下所示

// 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中呈现的

• 数组nums

可以从component 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是由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并刷新内容。