javascript - 在基于 TypeScript 的 Vue 中将 vuex 状态和突变绑定到复选框组件属性
问题描述
问题
将复选框创建为 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';
@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;
}
@Mutation
public toggleDoNotPreProcessMarkupEntryPointsFlag(): void {
this._doNotPreProcessMarkupEntryPointsFlag = !this._doNotPreProcessMarkupEntryPointsFlag;
}
}
用法
SimpleCheckbox(
:checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"
:onClick="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"
parentElementCssClass="RegularCheckbox"
)
import { Component, Vue } from "vue-property-decorator";
import { getModule } from "vuex-module-decorators";
import ExampleStoreModule from "@Store/modules/ExampleStoreModule";
import template from "@Templates/ExampleTemplate.pug";
import SimpleCheckbox from "@Components/Checkboxes/MaterialDesign/SimpleCheckbox.vue";
@Component({ components: { SimpleCheckbox } })
export default class MarkupPreProcessingSettings extends Vue {
private readonly relatedStoreModule: ExampleStoreModule = getModule(ExampleStoreModule);
}
华林斯
如果单击复选框,则会出现。Checkbox 可以按我们的需要工作,但是违反了一些 Vue 概念。
vue.common.dev.js:630 [Vue warn]: $attrs is readonly.
found in
---> <SimpleCheckbox> at hikari-frontend/UiComponents/Checkboxes/MaterialDesign/SimpleCheckbox.vue
<MarkupPreProcessingSettings>
<Application> at ProjectInitializer/ElectronRendererProcess/RootComponent.vue
<Root>
vue.common.dev.js:630 [Vue warn]: $listeners is readonly.
found in
---> <SimpleCheckbox> at hikari-frontend/UiComponents/Checkboxes/MaterialDesign/SimpleCheckbox.vue
<MarkupPreProcessingSettings>
<Application> at ProjectInitializer/ElectronRendererProcess/RootComponent.vue
<Root>
vue.common.dev.js:630 [Vue warn]: Avoid mutating a prop directly since the value will be overwritten whenever the parent component re-renders. Instead, use a data or computed property based on the prop's value. Prop being mutated: "checked"
found in
---> <SimpleCheckbox> at hikari-frontend/UiComponents/Checkboxes/MaterialDesign/SimpleCheckbox.vue
<MarkupPreProcessingSettings>
<Application> at ProjectInitializer/ElectronRendererProcess/RootComponent.vue
<Root>
沉思
经常发出此警告的原因是某些 vue 属性的新值已在组件内部分配。明确地说,我没有这样的操作。
问题出在:onClick="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"
. 看起来它编译成类似的东西<component>.$props.onClick="<vuex store manipulations ...>"
- 如果是这样,它是组件内部的隐式属性突变。
试试 2
概念
Vue.component('base-checkbox', {
model: {
prop: 'checked',
event: 'change'
},
props: {
checked: Boolean
},
template: `
<input
type="checkbox"
v-bind:checked="checked"
v-on:change="$emit('change', $event.target.checked)"
>
`
})
带有vue-property-decorator的 TypeScript 的等价物将是:
import { Vue, Component, Model } from 'vue-property-decorator'
@Component
export default class YourComponent extends Vue {
@Model('change', { type: Boolean }) readonly checked!: boolean
}
零件
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass")
input.SvgCheckbox-InvisibleAuthenticCheckbox(
type="checkbox"
:checked="checked"
:disabled="disabled"
@change="$emit('change', $event.target.checked)"
)
svg(viewbox='0 0 24 24').SvgCheckbox-SvgCanvas
// ...
import { Vue, Component, Prop, Model } from "vue-property-decorator";
@Component
export default class SimpleCheckbox extends Vue {
@Model('change', { type: Boolean }) readonly checked!: boolean;
@Prop({ type: Boolean, default: false }) private readonly disabled!: boolean;
@Prop({ type: String }) private readonly text?: string;
@Prop({ type: String }) private readonly rootElementCssClass?: string;
}
用法
SimpleCheckbox(
v-model="doNotPreProcessMarkupEntryPointsFlag"
rootElementCssClass="RegularCheckbox"
)
在 TypeScript 中,要使用v-model
,我们需要声明 getter 和同名 setter:
@Component({
template,
components: {
SimpleCheckbox,
// ...
}
})
export default class MarkupPreProcessingSettings extends Vue {
private readonly relatedStoreModule: MarkupPreProcessingSettingsStoreModule =
getModule(MarkupPreProcessingSettingsStoreModule);
//...
private get doNotPreProcessMarkupEntryPointsFlag(): boolean {
return this.relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag;
}
private set doNotPreProcessMarkupEntryPointsFlag(_newValue: boolean) {
this.relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag();
}
}
警告
相同的错误集:
限制
首先,我们需要在 Vue 组件类中创建新的 getter 和 setter。如果可能的话,避免 id 会很酷。不幸的是,对于 vuex 类(通过vuex-module-decorators),TypeScript setter 不可用,我们需要使用@Mutation
-decorated 方法。
此外,此解决方案不适用于由v-for
. 它使这个解决方案毫无用处。
尝试 3
概念
事件发射器和自定义事件监听器的使用。此解决方案也可以正常工作,但 Vue 会发出警告。
零件
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")
// ...
用法
SimpleCheckbox(
:checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"
@toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"
rootElementCssClass="RegularCheckbox"
)
警告
更新
还有一些谜题,但问题已经解决。请看下面我的回答。
解决方案
此警告发生在电子应用程序中。SimpleCheckbox
来自,但是这个node_modules
库仍在开发中,所以它由npm link
.
当我尝试进行复制时,我为浏览器创建了 SPA,并将其放置SimpleCheckbox
到同一个项目中(没有从 中获取node_modules
)。第一个解决方案有效!(我不关心第二个和第三个 - 我只需要从剥离优雅的解决方案中提炼)。
我建议原因是npm link
,发布我的库并通过npm install
. 警告消失了!
结论
造成这样的问题已经不是第一次npm link
了。这是另一个案例。
我仍然没有深入了解这个案例 - 我刚刚发布了一些实验数据。“那么,如果图书馆还在开发中呢?” 问题仍然没有答案。我尝试了Lerna - 第一次警告消失了,但是当我将我的项目移动到 Lerna 时,警告再次出现 - 我还不清楚规律性。
推荐阅读
- ios - 带有异步网络请求的Swift 2 For Loop在响应后继续循环
- python - Python:转到 For 循环的下一个字母
- salesforce - Salesforce 测试 Web 服务调用
- python - Python字典矩阵“表示”
- r - R:if语句中的一部分代码不执行
- c++ - Visual Studio 2017 - 转到定义转到 .h 文件而不是 .cpp
- r - 如何在 rmarkdown 中交叉引用表和图?
- python - 替换列表python列表中的字符串
- php - 使用 css 和 jquery 在图库中的活动图像周围设置边框
- ruby-on-rails - Rails-Mongoid-Devise:创建时,错误消息“用户不能为空”