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

•浏览 1

Bind vuex state and mutations to checkbox component properties in TypeScript-based Vue

问题

将复选框创建为 Vue 组件，其中：

  • 复选框组件内不允许有逻辑：所有事件处理程序以及 checked 属性都完全依赖于外部逻辑，可能是 vuex 存储。
  • 我们不应该看复选框"已选中"的状态：选中与否，这又取决于外部逻辑，例如。 G。 vuex 状态或吸气剂。

    • 试试 1

    概念

    复选框组件有 checked 和 onClick 属性，它们的值是偏离的，可以是动态的。

    零件

    帕格语模板：

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

}

    存储模块

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

}

    用法

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

}

    华林斯

    点击复选框时出现。复选框按我们的需要工作，但是违反了一些 Vue 概念。

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

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

}

    沉思

    此警告经常发出，原因是某些 vue 属性的新值已在组件内部分配。明确地说，我没有进行这样的操作。

    问题出在 :onClick="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag" 中。看起来它编译为类似 <component>.$props.onClick="<vuex store manipulations ...>" 的东西 - 如果是这样，它是组件内部的隐式属性突变。

    试试 2

    概念

    基于 Vue 文档，自定义组件部分：

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

}

    带有 vue-property-decorator 的 TypeScript 的等价物是：

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

}

    零件

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,

 },

 change: {

  type: Function,

  default: () => {},

 }

},

data: {

 checkedModel: false,

},

mounted() {

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

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

}
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.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)"

  >

 `

})

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"

)

@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();

 }

}
label.SvgCheckbox-LabelAsWrapper(:class="rootElementCssClass" @click.prevent="$emit('toggled')")

 // ...
SimpleCheckbox(

 :checked="relatedStoreModule.doNotPreProcessMarkupEntryPointsFlag"

 @toggled="relatedStoreModule.toggleDoNotPreProcessMarkupEntryPointsFlag"

 rootElementCssClass="RegularCheckbox"

)
props: {

 checked: {

  type: Boolean,

  default: false,
赞 (0)
« 上一篇
下一篇 »

相关推荐

  • Spring部署设置openshift

    Springdeploymentsettingsopenshift我有一个问题让我抓狂了三天。我根据OpenShift帐户上的教程部署了spring-eap6-quickstart代码。我已配置调试选项，并且已将Eclipse工作区与OpehShift服务器同步-服务器上的一切工作正常，但在Eclipse中出现无法消除的错误。我有这个错误：cvc-complex-type.2.4.a:Invali…
    2025-04-161

  • 检查Java中正则表达式中模式的第n次出现

    CheckfornthoccurrenceofpatterninregularexpressioninJava本问题已经有最佳答案，请猛点这里访问。我想使用Java正则表达式检查输入字符串中特定模式的第n次出现。你能建议怎么做吗？这应该可以工作：MatchResultfindNthOccurance(intn,Patternp,CharSequencesrc){Matcherm=p.matcher…
    2025-04-161

  • 如何让 JTable 停留在已编辑的单元格上

    HowtohaveJTablestayingontheeditedcell如果有人编辑JTable的单元格内容并按Enter，则内容会被修改并且表格选择会移动到下一行。是否可以禁止JTable在单元格编辑后转到下一行？原因是我的程序使用ListSelectionListener在单元格选择上同步了其他一些小部件，并且我不想在编辑当前单元格后选择下一行。Enter的默认绑定是名为selectNext…
    2025-04-161

  • Weblogic 12c 部署

    Weblogic12cdeploy我正在尝试将我的应用程序从Tomcat迁移到Weblogic12.2.1.3.0。我能够毫无错误地部署应用程序，但我遇到了与持久性提供程序相关的运行时错误。这是堆栈跟踪：javax.validation.ValidationException:CalltoTraversableResolver.isReachable()threwanexceptionatorg.…
    2025-04-161

  • Resteasy Content-Type 默认值

    ResteasyContent-Typedefaults我正在使用Resteasy编写一个可以返回JSON和XML的应用程序，但可以选择默认为XML。这是我的方法：@GET@Path("/content")@Produces({MediaType.APPLICATION_XML,MediaType.APPLICATION_JSON})publicStringcontentListRequestXm…
    2025-04-161

  • 代码不会停止运行，在 Java 中

    thecodedoesn'tstoprunning,inJava我正在用Java解决项目Euler中的问题10，即"Thesumoftheprimesbelow10is2+3+5+7=17.Findthesumofalltheprimesbelowtwomillion."我的代码是packageprojecteuler_1;importjava.math.BigInteger;importjava…
    2025-04-161

  • Out of memory java heap space

    Outofmemoryjavaheapspace我正在尝试将大量文件从服务器发送到多个客户端。当我尝试发送大小为700mb的文件时，它显示了"OutOfMemoryjavaheapspace"错误。我正在使用Netbeans7.1.2版本。我还在属性中尝试了VMoption。但仍然发生同样的错误。我认为阅读整个文件存在一些问题。下面的代码最多可用于300mb。请给我一些建议。提前致谢publicc…
    2025-04-161

  • Log4j 记录到共享日志文件

    Log4jLoggingtoaSharedLogFile有没有办法将log4j日志记录事件写入也被其他应用程序写入的日志文件。其他应用程序可以是非Java应用程序。有什么缺点？锁定问题？格式化？Log4j有一个SocketAppender，它将向服务发送事件，您可以自己实现或使用与Log4j捆绑的简单实现。它还支持syslogd和Windows事件日志，这对于尝试将日志输出与来自非Java应用程序…
    2025-04-161
手机版技术脚本