将 vuex 状态和突变绑定到基于 TypeScript 的 Vue 中的复选框组件属性

Question

问题将复选框创建为 Vue 组件，特此：复选框组件内部不允许有逻辑：所有事件处理程序和checked属性都完全依赖于外部逻辑，可能是vuex存储。我们不应该观察复选框“已检查”的状态：是否选中，再次取决于外部逻辑，例如vuex状态或 getter。尝试 1概念复选框组件具有checked和onClick属性，其值当然可以是动态的。成分Pug语言模板：label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="onClick")  input.SvgCheckbox-InvisibleAuthenticCheckbox(    type="checkbox"    :checked="checked"    :disabled="disabled"  )  svg(viewbox='0 0 24 24').SvgCheckbox-SvgCanvas    path(      v-if="!checked"      d='M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3M19,5V19H5V5H19Z'    ).SvgCheckbox-SvgPath.SvgCheckbox-SvgPath__Unchecked    path(      v-else      d='M10,17L5,12L6.41,10.58L10,14.17L17.59,6.58L19,8M19,3H5C3.89,3 3,3.89 3,5V19A2,2 0 0,0 5,21H19A2,2 0 0,0 21,19V5C21,3.89 20.1,3 19,3Z'    ).SvgCheckbox-SvgPath.SvgCheckbox-SvgPath__Checked  span(v-if="text").SvgCheckbox-AppendedText {{ text }}import { Vue, Component, Prop } from 'vue-property-decorator';@Componentexport default class SimpleCheckbox extends Vue {  @Prop({ type: Boolean, required: true }) private readonly checked!: boolean;  @Prop({ type: Boolean, default: false }) private readonly disabled!: boolean;  @Prop({ type: String }) private readonly text?: string;  @Prop({ type: String }) private readonly parentElementCssClass?: string;  @Prop({ type: Function, default: () => {} }) private readonly onClick!: () => void;}商店模块import { VuexModule, Module, Mutation } from "vuex-module-decorators";import store, { StoreModuleNames } from "@Store/Store";@Module({ name: StoreModuleNames.example, store, dynamic: true, namespaced: true })export default class ExampleStoreModule extends VuexModule {  private _doNotPreProcessMarkupEntryPointsFlag: boolean = true;  public get doNotPreProcessMarkupEntryPointsFlag(): boolean {    return this._doNotPreProcessMarkupEntryPointsFlag;  }

Answer 1

此警告发生在电子应用程序中。的SimpleCheckbox是node_modules，然而，这库仍处于开发阶段，所以它已被提供npm link。

当我尝试进行复制时，我为浏览器创建了 SPA 并将其放置SimpleCheckbox到同一个项目（未从 获得node_modules）。第一个解决方案有效！（我不在乎第二个和第三个 - 我只需要从剥离优雅的解决方案中提炼出来）。

我建议原因是npm link，发布我的库并通过npm install. 警告消失了！

结论

出现这样的问题已经不是第一次npm link了。这是另一个案例。

我还是没有深入理解这个案例——我刚刚发布了一些实验数据。“那么，如果图书馆还在开发中呢？” 问题仍然没有答案。我尝试了Lerna - 第一次警告消失了，但是当我将我的项目移动到 Lerna 时，警告再次出现 - 对我来说规律性尚不清楚。

Answer 2

我不确定这是基于打字稿的问题。

根据您的警告信息，你的代码，我可以看到，您使用prop的input模型。

默认情况下，prop不允许进行变异。

prop即使它是一个Objector也进行变异可能是一个坏主意Array。（如果 prop 是Object或Array，它可以在儿童中发生变异。但不推荐）

为避免此警告，您可以使用数据，它是子项中 prop 的克隆，如下所示：

props: {

  checked: {

    type: Boolean,

    default: false,

  },

  change: {

    type: Function,

    default: () => {},

  }

},

data: {

  checkedModel: false,

},

mounted() {

  this.checkedModel = this.checked; // init model value as prop

}