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

Question

问题

将复选框创建为 Vue 组件，特此：

1. 复选框组件内部不允许有逻辑：所有事件处理程序和checked属性都完全依赖于外部逻辑，可能是vuex存储。

2. 我们不应该观察复选框“已检查”的状态：是否选中，再次取决于外部逻辑，例如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';

@Component

export 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}