Summary of doubtful points of Vue project

Front end learning on the way 2022-06-23 18:40:06 阅读数:229

summarydoubtfulpointsvueproject

Catalog

One 、 Knowledge points and doubtful points

1、export and export default The difference between

2、$refs

3、props

4、this.$store.dispatch() and this.$store.commit()

5、context.commit

Two 、VUEX Project ideas

        1、 Load all the data

        2、 Add data

        3、 Delete data

        4、 Edit the data

        5、 data display

One 、 Knowledge points and doubtful points

1、export and export default The difference between

effect :export Is used to export constants 、 function 、 Module etc. , You can import other files directly import

Available quantities vary : In a document export and import There can be many , but export default There can only be 1 individual

The code format specifications are different :

export function output() { ... } // export
import {output} from './example' // introduce 
export default function output() { ... } // export
import output from './example' // introduce 

namely export default You can import without adding {}, In other words , It's just that the grammar sugar is different

export function output() { ... } // export
// Equivalent to :
//function output() {} function
//export {output as default}
import output from './example' // introduce
// Equivalent to :
//import {default as output} from './example'

Links to resources :Vue in export and export default The difference between - Simple books

2、$refs

Use scenarios :

Call component

reason : because vue Try not to use dom Elements , So when you have to use it, you can use ref

Method : First bind the target element to be obtained ref attribute , Use directly this.$refs.ref The attribute value

Parent component calls child component :

Method :this.$refs. Subcomponents ref The attribute value

Links to resources :

Vue $refs usage

vue How to use $refs Call subcomponent table Medium toggleRowSelection Method - SegmentFault Think no

3、props

Definition : It is the only interface for child components to access parent component data ,props Is one-way bound , Forming a one-way data stream , When the attribute in the parent component changes, it will be transferred to the child component , But the child component will not be transferred to the parent component .

It must be clear that the scope of the component instance is isolated , This means that the data of the parent component cannot be used directly in the child component .

Code instance :

<!-- This is the subcomponent -->
<template>
<!-- Look here !!! Values are used here !!!-->
<div class="brandDialog" v-if="dialogVisible">
<div>
<div>
<label for="bname"> The brand name </label>
<input type="text" name="bname" id="bname" v-model="brandForm.bname">
</div>
<div>
<label for="bpirce"> Brand unit price </label>
<input type="text" name="bprice" id="bprice" v-model="brandForm.bprice">
</div>
<div>
<button @click="submit"> Submit </button>
<button> Cancel </button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
brandId:'',
brandForm:{
bname:'',
bprice:''
}
}
},
// Look here !!! ad locum
props:['dialogVisible']
}
</script>
<!-- This is the parent component's script part -->
<script>
export default {
data(){
return{
// Here, here !!!
dialogVisble: false
}
}
}
</script>

4、this.$store.dispatch() and this.$store.commit()

dispatch: Asynchronous operations , Such as submitting data to the background

grammar : this.$store.dispatch('action Method name ', value )

action:

Used to submit mutation Changing data

It encapsulates itself as a by default promise

It can contain any asynchronous operation

commit: Synchronous operation

grammar :this.$store.commit('mutations Method name ', value )

mutations:

By submitting commit Changing data

Just a simple function

Do not use asynchronous operations , Asynchronous operation will cause variables to be untraceable . in other words , use action Function call in mutations The function in , Do asynchronous operations state Data in

5、context.commit

context It can be understood as state A higher level of , adopt context.commit, Can be obtained with actions Of the same rank mutations

// Create a data management module
const store = new Vuex.Store({
state: {
// Data storage unit
brandList: [
{ id: 3, bname: " Huawei MATA50", bprice: 8999 },
{ id: 2, bname: " millet 12", bprice: 6999 },
{ id: 1, bname: " Apple 14", bprice: 5999 }
]
},
mutations: {
// Data synchronization unit
// Add a synchronization function for brand data
addBrandMutations(state, brand) {
console.log("addBrandMutations The function call executes ");
let id = state.brandList.length > 0 ? state.brandList[0].id + 1 : 1
state.brandList.unshift({ id, ...brand })
},
editBrandMutations(state, brand) {
// Query the index of the data to be edited
let index = state.brandList.findIndex(item => item.id === brand.id)
// Update data
state.brandList[index].bname = brand.bname
state.brandList[index].bprice = brand.bprice
},
delBrandMutations(state, brand) {
// Delete by filtering
state.brandList = state.brandList.filter(item => item.id !== brand.id)
}
},
actions: {
// Data asynchronous unit
// Add asynchronous function of brand data
addBrandActions(context, brand) {
// TODO axios Send asynchronous request , Add data to the interface
// call mutation function , Complete data synchronization
console.log("addBrandList Function is Vue The component call executes ")
context.commit('addBrandMutations', brand)
},
editBrandActions(context, brand) {
// axios Send asynchronous request , Call the interface to complete the data update
// call mutations function , Complete data synchronization
context.commit('editBrandMutations', brand)
},
delBrandActions(context, brand) {
context.commit('delBrandMutations', brand)
}
},
getter: {
// Data computing unit
brandCount(state) {
// similar vue Medium computed Compute properties
return state.brandList.length
}
}
})
export default store

6、...mapState('A', ['a1'])

Decoupling :

  • mapState('A',['a1'])      Introduce sub modules A Of the data storage unit in a1 attribute       Written in computed modular   Add in front ... yes ES6 Expansion symbols in
  • mapActions('B',['b1'])    Introduce sub modules A Data asynchronous unit in b1 attribute       Written in methods modular  

 

 

 

Two 、VUEX Project ideas

1、 Load all the data

        ①src I'm gonna go ahead and create a new folder store The files in it index.js

        index.js The content of : Introduce dependencies 、 Register plug-ins 、 establish vuex Data management module ( State warehouse )

        ② Status warehouse state It stores data

        ③ stay main.js Status warehouse is introduced into

        ④ Render the data to the table through the list rendering instruction

2、 Add data

        ① Write add data button , And register click events

        ② Write pop-up components brandDialog   Tables and buttons

            Get parent component brand Inside “dialogVisible”;

            add to v-if Instructions Used to determine whether to display v-if The variable of :dialogVisible;

            Form content : The entire data and each attribute key value pair in the form ;

            Derived data : Data is data table , The data in the data table is obtained through v-model;

            Register events for the submit button submit For submitting data

                    submit function : Call the actions( Data asynchronous unit )

                    index Medium actions call mutations( Data synchronization unit ) The method in

                    index Medium mutations call state Data in

                    Finally, operate the data

        ② Click on the event content : Show pop ups

3、 Delete data

4、 Edit the data

5、 data display

        First, in the brand Called during the creation cycle of the module actions function ;

        Secondly, in store Status warehouse actions New data asynchronism unit actions function

                stay store Status warehouse actions Function to send an asynchronous request first , Then submit the return value of the asynchronous request to mutations Data synchronization unit ;

        And then in mutations Call in the data synchronization unit state Data storage unit , To... In the storage unit brandList assignment ;

        Finally, render the data to the page -> adopt v-for Instructions call directly state Data storage unit Data in .

3、 ... and 、 summary

That's right VUE A brief summary of the project , The technology stack also contains VUEX, Please correct the shortcomings .

版权声明:本文为[Front end learning on the way]所创,转载请带上原文链接,感谢。 https://qdmana.com/2022/174/202206231747191626.html