如何在 Ember 中更新服务商店中的数据？

Question

我在声明商店的地方创建了一个服务：

store.js:

import Service from '@ember/service';

export default class StoreService extends Service {
  store = {
    lang: 'EN'
  }
}

我也可以通过以下路线进入商店：

first.js:

import Route from '@ember/routing/route';
import { inject } from '@ember/service';

export default Route.extend({
  store: inject(),
  model() {
    console.log(this.store);
    return this.store;
  }
});

还有模板。 first.hbs:

<div class="wrapper">
  <h3>First</h3>
  <hr class="gold">
  <p><button type="button">CN</button></p>
  {{model.store.lang}}
</div>

{{outlet}}

请告诉我如何通过按“CN”按钮从路线更改商店中的数据（将 lang 设置为“CN”）？

此致。

Answer 1

如果您使用 ember >= 3.16。在你的 store.js 中跟踪状态

@tracked store = {
  lang: 'EN'
}

然后在您的 first.hbs 中添加按钮

<button {{on "click" this.changeLanguajeToCN}} type="button">CN</button>

最后在你的控制器中（你需要创建这个文件）first.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class FirstController extends Controller {
  @service store;

  @action changeLanguajeToCN () {
    this.store.store = {...this.store, lang: 'CN'}
  };
}

Answer 2

扩展，我建议跟踪 lang 属性本身而不是包含它的对象。

此外，我更愿意使用不同的名称，因为 store 具有误导性，人们会认为您正在尝试使用 Ember Data's Store，它在 Ember 项目中默认可用，并且作为属性在路线上。

查看此 Twiddle 以查看实际代码：
https://ember-twiddle.com/02ac6f708d1861816df0f1bce504729a

// app/services/settings.js

import Service from '@ember/service';
import { tracked } from '@glimmer/tracking';

export default class SettingsService extends Service {
  @tracked lang = 'EN'
}

// app/controllers/first.js

import Controller from '@ember/controller';
import { inject as service } from '@ember/service';
import { action } from '@ember/object';

export default class FirstController extends Controller {
  @service settings;

  @action changeLanguajeToEN () {
    this.settings.lang = 'EN';
  }
  
  @action changeLanguajeToCN () {
    this.settings.lang = 'CN';
  }
}

{{! app/templates/first.hbs }}

<div class="wrapper">
  <h3>First route</h3>
  <hr class="gold">
  <p>
    <button type="button" {{on "click" this.changeLanguajeToEN}}>Change to English</button>
    <button type="button" {{on "click" this.changeLanguajeToCN}}>Change to Chinese</button>
  </p>
  <p>The current language is: <code>{{this.settings.lang}}</code></p>
</div>

{{outlet}}

如何在 Ember 中更新服务商店中的数据？

How do I update data in the service store in Ember?

javascript

ember.js

ember-data

ember-cli