2

我想在香草打字稿文档中使用 MST 中的值。它没有组件，只是在其他组件中元素的样式标签中引用的 css 值对象。这可能吗？如果是这样，我将如何去做？

编辑：这是一些代码

Mobx 状态树

import { types } from 'mobx-state-tree'

export const BotCSS = types.model({
  chatBackground: types.optional(types.string, '#fff'),
  fontType: types.optional(types.string, 'Open Sans'),
  hoverFillColor: types.optional(types.string, '#306aca'),
  hoverFontColor: types.optional(types.string, '#f2f2f2'),
  primaryColor: types.optional(types.string, '#427ee1'),
  secondaryColor: types.optional(types.string, '#f2f2f2'),
  typingAnimationDots: types.optional(types.string, '#427ee1'),
  typingAnimationFill: types.optional(types.string, '#f2f2f2'),
  userResponseColor: types.optional(types.string, '#427ee1')
})

export type IBotCSS = typeof BotCSS.Type

带有主题 obj 的 theme.ts 文档 - 我想将 mobx 值设置为等于其中一些变量

const userMessageBackgroud = `${blue}`
const userMessageBorder = `${blue}`
const userMessageColor = `${white}`

const minimizeboxBackgroud = `${blue}`
const minimizeboxColor = `${white}`

export const theme = {
  AgentBar: {
    Avatar: {
      size: '42px'
    },
    css: {
      backgroundColor: `${secondaryColor}`,
      borderColor: `${avatarBorderColor}`
    }
  },
  AvatarImg: {
    backgroundColor: 'transparent',
    border: 'none',
    borderRadius: 0,
    height: '38px',
    width: '40px'
  }, (...etc)

所以本质上在这个 theme.ts 文档的顶部有许多变量在主题对象中使用。我想将 mobx 中的值设置为文档顶部的变量声明

4

2 回答 2

0

因此，您忘记了创建商店，并且要更改商店中字段的状态，您需要创建方法（“操作”）。

这是一个示例

于 2019-02-01T06:45:01.933 回答
0

首先你应该意识到 MobX 和 MST 是完全独立的状态管理库，可以完美地独立工作，无需任何组件框架。

其次，您不能直接在 MST 中将值设置为商店的属性（首先创建商店的实例，例如：）const botCss = BotCSS.create()。您需要为此定义专用的设置器（或MobX术语中的操作）。就像是：

import { types } from 'mobx-state-tree'

export const BotCSS = types.model({
  chatBackground: types.optional(types.string, '#fff'),
  fontType: types.optional(types.string, 'Open Sans'),
  hoverFillColor: types.optional(types.string, '#306aca'),
  hoverFontColor: types.optional(types.string, '#f2f2f2'),
  primaryColor: types.optional(types.string, '#427ee1'),
  secondaryColor: types.optional(types.string, '#f2f2f2'),
  typingAnimationDots: types.optional(types.string, '#427ee1'),
  typingAnimationFill: types.optional(types.string, '#f2f2f2'),
  userResponseColor: types.optional(types.string, '#427ee1')
})
.actions(self => {
  setCss(data) {
    Object.assign(self, data);
  }
})

export const botCss = BotCSS.create() // you might even export the instance itself

export type IBotCSS = typeof BotCSS.Type

然后在另一个模块中，您可以导入实例或类型（然后创建一个实例）并使用新值调用设置器：

import { botCss } from './BotCSS'

botCss.setCss({
   chatBackground: '#ff0000'
});
于 2019-03-02T16:17:07.693 回答