如何在 Ember 中更新服務存儲中的數據？

Question

我創建了一個服務，我在其中聲明了商店：

商店.js：

import Service from '@ember/service';

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

我還可以從以下路線進入商店：

第一個.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;
  }
});

還有模板。 首先.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

擴展Pablo 的回答，我建議跟蹤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}}