小编ngr*_*900的帖子

Vue.js中的一个全局数据结构

我正在使用Vue.js构建单页应用程序.这是一个相对简单的应用程序,更像是一个扩展的,固定的电子表格.我正在使用vue-router处理应用程序的不同视图,一些用于输入新数据,一些用于执行数据计算但所有数据交织在一起(在视图#1中输入的数据用于在视图中输入数据# 2然后两者都用于计算视图#3中的内容.

这意味着我需要一个全局数据结构.根据我的研究,我发现我有几种方法可以解决这个问题:

  • "正确"的方式:在组件中发出事件并在父母中处理它们; 对于我想要达到的目标而言,这似乎有点过于复杂
  • 通过直接在组件模板中访问父作用域 $parent.$data
  • 我当前的解决方案,将父数据引用分配给子数据对象

像这样:

const REPORTS = {
  template: templates.reports,
  data: function(){
    return this.$parent.$data
  }
};
Run Code Online (Sandbox Code Playgroud)

但是,我的第六感觉告诉我,这不是一个好习惯.

如果我是对的,有什么更好的方法来实现这一目标:一,全球数据结构,可以从所有组件访问?

javascript vue.js vue-component

5
推荐指数
1
解决办法
2313
查看次数

DataTransferItem的getAsFile方法为文件返回null

我正在实现一个简单的拖放文件输入.我想在丢弃区域上"悬停"它们时预览文件(图像).但是,该getAsFile方法会继续返回null文件.这是我的代码:

dropzone.addEventListener("dragenter", event => {
    event.preventDefault();

    // make sure these are actually images

    if(!isImages(event)){
      return;
    }

    // preparing the preview area

    let target = dropzone_overlay_images;
    target.innerHTML = '';

    for(let i = 0; i < event.dataTransfer.items.length; i++){

      // assign current item to a variable to make working with it easier

      let item = event.dataTransfer.items[i];
      let img = document.createElement('img');

      // for debug: logging the current item

      console.log(item);

      // get it as file

      let file = item.getAsFile();

      // and …
Run Code Online (Sandbox Code Playgroud)

javascript

1
推荐指数
1
解决办法
1070
查看次数

标签 统计

javascript ×2

vue-component ×1

vue.js ×1