【问题标题】:Ember component - TypeError: store is undefinedEmber 组件 - 类型错误:存储未定义
【发布时间】:2016-02-14 06:23:20
【问题描述】:

我使用的是 ember 2.3。当我尝试访问组件内的商店时,我在控制台中收到以下错误。

这是我在component.js中尝试过的

export default Ember.Component.extend({

actions: {
  saveEmployee : function() {
      var store = this.store;

      var newEmployee = store.createRecord("employee", {
          fname: "Manu",
          lname: "Benjamin",
          email: "manu.benjamin@gmail.com",
          department: "IT Services"
      });

      newEmployee.save().then(()=> {
          console.log("Record successfully saved!!!!");
      });

  }
}
});

我需要在我的组件中包含任何东西来使用 store 吗?

【问题讨论】:

    标签: ember.js ember-data


    【解决方案1】:

    我试图找出这种类型错误的原因。最后我从 Josh Farrant 的以下博客中找到了解决方案。

    https://blog.farrant.me/how-to-access-the-store-from-within-an-ember-component/

    我们需要在组件中注入 store 服务。

    store: Ember.inject.service(),
    

    我们可以使用get函数在action中注入store,

    let store = this.get('store');
    

    我使用上述解决方案修改了我的代码,它对我有用。

    export default Ember.Component.extend({
    
    store: Ember.inject.service(),
    
    actions: {
    
      saveEmployee : function() {
          var store = this.get('store');
    
          var newEmployee = store.createRecord("employee", {
              fname: "Manu",
              lname: "Benjamin",
              email: "manu.benjamin@gmail.com",
              department: "IT Services"
          });
    
          newEmployee.save().then(() => {
              console.log("Record successfully saved!!!!");
          });
    
      }
    }
    });
    

    感谢 Josh Farrant 的精彩博客。

    【讨论】:

    • 存储现在不会自动注入到组件、控制器和路由中吗?
    【解决方案2】:

    这个话题已经讨论过很多次了,我相信你可以找到很多关于这个问题的帖子。让我简短地重复一下已经提到的内容:尽量避免在组件中直接使用 store。

    如果您的设计允许您在关联的路由或控制器中操作 Ember 存储(其中存储在默认情况下可用),请尝试从组件发送操作以使其冒泡到控制器并执行控制器中的存储操作。可能 EmberJS guides - how to send actions from components 帮你搞定。

    【讨论】:

    • 感谢帕沃尔提供的信息。现在我将动作从组件发送到路由/控制器。但是,之前我试图访问组件中的存储,发现使用依赖注入我们可以做到这一点。
    猜你喜欢
    • 1970-01-01
    • 2017-01-16
    • 1970-01-01
    • 2019-10-31
    • 1970-01-01
    • 2016-08-07
    • 2019-01-07
    • 2020-01-28
    • 2021-10-24
    相关资源
    最近更新 更多