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

Posted 2023-02-16

【中文标题】如何将按下按钮时的数据添加到 Vue 3 的根目录或组件？

【英文标题】：How would I add data on a button press to the either the root or a component of Vue 3?

【发布时间】：2022-01-08 13:57:08

【问题描述】：

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

【参考方案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 store 可以这样访问。

// 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访问。

<template>
  <img  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) 呈现

数组 nums 可以从外部 js 更新

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

commit('replaceNum', ...) - 在突变中调用方法replaceNum。它更新了nums，内容也被刷新了。