Javascript 如何更新Ember中service store中的数据？

我创建了一个服务，其中声明了存储：

store.js:

import Service from '@ember/service';

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

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;
  }
});

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

{{outlet}}

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

first.js:

import Service from '@ember/service';

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

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;
  }
});

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

{{outlet}}

和模板。 第一。哈佛商学院：

import Service from '@ember/service';

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

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;
  }
});

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

{{outlet}}

弗斯特

CN

{{model.store.lang}
{{outlet}}

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

---

问候。

如果您使用的是会员>=3.16。在你的store.js中，像这样跟踪状态

@tracked store = {
  lang: 'EN'
}

然后在您的中，首先.hbs添加到按钮

CN

最后在控制器中（您需要创建此文件）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'}
  };
}

---

如果您使用的是usign ember>=3.16。在你的store.js中，像这样跟踪状态

@tracked store = {
  lang: 'EN'
}

然后在您的中，首先.hbs添加到按钮

CN

最后在控制器中（您需要创建此文件）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'}
  };
}

接着，我建议跟踪

lang

属性本身，而不是跟踪包含它的对象

另外，我更愿意使用不同的名称，因为

存储

会产生误导，人们会认为您正在尝试使用默认情况下在Ember项目上可用的名称以及routes上的属性

查看此旋转以查看正在运行的代码：

//app/services/settings.js
从“@ember/Service”导入服务；
从'@glimmer/tracking'导入{tracked}；
导出默认类设置服务扩展服务{
@tracked lang='EN'
}

//app/controllers/first.js
从“@ember/Controller”导入控制器；
从'@ember/service'导入{injectasservice}；
从'@ember/object'导入{action}；
导出默认类FirstController扩展控制器{
@服务设置；
@动作更改LanguageToen（）{
this.settings.lang='EN'；
}
@action ChangeLanguageTocn（）{
this.settings.lang='CN'；
}
}

接着，我建议跟踪

lang

属性本身，而不是跟踪包含它的对象

另外，我更愿意使用不同的名称，因为

存储

会产生误导，人们会认为您正在尝试使用默认情况下在Ember项目上可用的名称以及routes上的属性

查看此旋转以查看正在运行的代码：

//app/services/settings.js
从“@ember/Service”导入服务；
从'@glimmer/tracking'导入{tracked}；
导出默认类设置服务扩展服务{
@tracked lang='EN'
}

//app/controllers/first.js
从“@ember/Controller”导入控制器；
从'@ember/service'导入{injectasservice}；
从'@ember/object'导入{action}；
导出默认类FirstController扩展控制器{
@服务设置；
@动作更改LanguageToen（）{
this.settings.lang='EN'；
}
@action ChangeLanguageTocn（）{
this.settings.lang='CN'；
}
}

---

什么版本的余烬？我强烈建议你使用不同的名称除了“商店”，因为它是非常误导。我以为你一开始是在谈论Ember Data的store。什么版本的Ember？我强烈建议你使用“store”之外的其他名称，因为它非常容易引起误解。我以为你一开始是在谈论余烬数据的存储。