Overview
In vue2, the logic we write is the option configuration object, and the relatively fixed writing methods, methods, and data correspond to their respective configuration items. However, when the logic of a component becomes more complex and the logic is increasing, at this time, a component cannot avoid writing a large amount of logic code. In version 2, using the officially recommended mixin can solve the problem of excessive logic of a component. Now record other methods I use in my work.
nature
In react, when we use redux, we will be exposed to the corresponding actions, reducers, dispatches, etc., and then triggers the corresponding logical modification by dispatching the corresponding event type, which is a bit like publishing and subscribing. Haha, here, we will learn from the idea of using redux in react to record the skills of extracting logical code in vue2.
Specific implementation
Take the most classic tooList as an example
- .components/ToodList/
<template>
<div>
<input type="text" placeholder="Please enter keywords" v-model="value" /><button
@click="handleAddTood"
>
Operation button
</button>
<tood-list-item
v-for="item in list"
:key=""
:item="item"
@handleDel="handleDel"
></tood-list-item>
</div>
</template>
<script>
import ToodListItem from "./ToodListItem";
export default {
components: {
ToodListItem,
},
props: {
list: {
type: Array,
default() {
return [];
},
},
},
data() {
return {
value: "",
};
},
methods: {
handleDel(item) {
this.$emit("handelDel", item);
},
handleAddTood() {
this.$emit("addTood", );
},
},
};
</script>
- .components/ToodList/
<template>
<div>
<input type="checkbox" v-model="" />
<span
:style="{ textDecoration: ? 'line-through' : 'none' }"
>{{ }}</span
>
<button @click="handleDel(item)">delete</button>
</div>
</template>
<script>
export default {
props: {
item: {
type: Object,
default() {
return {};
},
},
},
methods: {
handleDel(item) {
this.$emit("handleDel", item);
},
},
};
</script>
Under the .components/ToodList/hook file:
//Mainly define the type constants that are triggered by timeexport const ACTION_TYPES = {
del: "DEL",
add: "ADD",
};
Under the .components/ToodList/hook file:
//Dispatcher, find the corresponding event processing logic through action, and then triggerimport { addTood, removeTood } from "./toodReducer";
import { ACTION_TYPES } from "./actionTypes";
//Receive parameters, corresponding to the context of the vue componentexport default function (ctx) {
function dispatch(args) {
const { type, payLoad } = args;
//Trigger the corresponding logic in the reducer according to the behavior switch (type) {
case ACTION_TYPES.del:
(ctx)(payLoad);
break;
case ACTION_TYPES.add:
(ctx)(payLoad);
break;
default:
break;
}
}
//Return function that binds component instance return (ctx);
}
Under the .components/ToodList/hook file:
//Main event processing logic file (corresponding to method methods in vue component)//Add a tooexport function addTood(value) {
const toodListItme = {
title: value,
complated: false,
id: (),
};
(toodListItme);
}
//Delete a tooexport function removeTood(item) {
const { id } = item;
= ((item) => != id);
}
- document
<template>
<div >
<tood-list
:list="list"
@handelDel="handelDel"
@addTood="addTood"
></tood-list>
</div>
</template>
<script>
import ToodList from "@/components/ToodList/";
import dispatch from "./components/ToodList/hook/dispatch";
import { ACTION_TYPES } from "./components/ToodList/hook/actionTypes";
export default {
name: "App",
components: {
ToodList,
},
data() {
return {
list: [
{
title: "First item",
complated: false,
id: 1,
},
{
title: "The Second Item",
complated: false,
id: 2,
},
{
title: "Third item",
complated: true,
id: 3,
},
],
};
},
methods: {
//All logic codes are removed from the outside for processing, and the current component only needs to pay attention to the view. handelDel(item) {
dispatch(this)({
type: ACTION_TYPES.del,
payLoad: item,
});
},
addTood(value) {
dispatch(this)({
type: ACTION_TYPES.add,
payLoad: value,
});
},
},
};
</script>
Summarize
It is very common to write too much code in a component in vue2. The point where it is difficult to separate logic is this. Therefore, avoid too much logic in a file. You can try this method. After vue3 update, remove the transition dependence of single-file components on this. The corresponding compositionApi is already very convenient for us to withdraw single-file logic code.
The above is the detailed content of a large number of logical techniques in the distributor extraction vue2 single component. For more information on the logical separation of the distributor vue2 single component, please pay attention to my other related articles!