VUE项目疑点总结

前端学习在路上 2022-06-23 17:47:43 阅读数:764

总结项目vue疑点

目录

一、知识点疑点

1、export和export default 的区别

2、$refs

3、props

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

5、context.commit

二、VUEX项目思路

        1、加载全部数据

        2、添加数据

        3、删除数据

        4、编辑数据

        5、数据显示

一、知识点疑点

1、export和export default 的区别

作用:export是用于导出常量、函数、模块等,在其他文件引入时可以直接import

可用数量不同:一个文件里export和import可以有很多个,但export default只能有1个

代码格式规范不同:

export function output() { ... } // 导出
import {output} from './example' // 引入
export default function output() { ... } // 导出
import output from './example' // 引入

即export default 在导入时可以不加{},换言之,其实只是语法糖不一样

export function output() { ... } // 导出
//等价于:
//function output() {} 函数
//export {output as default}
import output from './example' // 引入
//等价于:
//import {default as output} from './example'

参考资料链接:Vue中export和export default的区别 - 简书

2、$refs

使用场景:

调用组件

原因:由于vue中尽量不使用dom元素,因此在不得不使用是就采用ref

方法:先将需要获取的目标元素绑定ref属性,使用时直接this.$refs.ref的属性值

父组件调用子组件:

方法:this.$refs.子组件的ref的属性值

参考资料链接:

Vue $refs用法

vue 如何使用$refs调用子组件table 中的toggleRowSelection方法 - SegmentFault 思否

3、props

定义:是子组件访问父组件数据的唯一接口,props是单向绑定的,形成单向数据流,父组件中属性变化时会传到子组件,但子组件不会传到父组件。

必须要明确的是组件实例的作用域是孤立的,这意味着不能在子组件中直接用父组件的数据。

代码实例:

<!--这是子组件-->
<template>
<!--看这儿!!!值的使用在这里!!!-->
<div class="brandDialog" v-if="dialogVisible">
<div>
<div>
<label for="bname">品牌名称</label>
<input type="text" name="bname" id="bname" v-model="brandForm.bname">
</div>
<div>
<label for="bpirce">品牌单价</label>
<input type="text" name="bprice" id="bprice" v-model="brandForm.bprice">
</div>
<div>
<button @click="submit">提交</button>
<button>取消</button>
</div>
</div>
</div>
</template>
<script>
export default {
data(){
return {
brandId:'',
brandForm:{
bname:'',
bprice:''
}
}
},
//看这儿!!!在这里
props:['dialogVisible']
}
</script>
<!--这是父组件的script部分-->
<script>
export default {
data(){
return{
//在这在这!!!
dialogVisble: false
}
}
}
</script>

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

dispatch:异步操作,如向后台提交数据

语法: this.$store.dispatch('action方法名',值)

action:

用于通过提交mutation改变数据

会默认将自身封装为一个promise

可以包含任意的异步操作

commit:同步操作

语法:this.$store.commit('mutations方法名',值)

mutations:

通过提交commit改变数据

只是一个单纯的函数

不要使用异步操作,异步操作会导致变量不能追踪。也就是说,用action中的函数调用mutations中的函数,进行异步操作state中的数据

5、context.commit

context可以理解为state的上一级,通过context.commit,可以获取与actions同级的mutations

// 创建数据管理模块
const store = new Vuex.Store({
state: {
// 数据存储单元
brandList: [
{ id: 3, bname: "华为MATA50", bprice: 8999 },
{ id: 2, bname: "小米12", bprice: 6999 },
{ id: 1, bname: "苹果14", bprice: 5999 }
]
},
mutations: {
// 数据同步单元
// 添加品牌数据的同步函数
addBrandMutations(state, brand) {
console.log("addBrandMutations函数调用执行了");
let id = state.brandList.length > 0 ? state.brandList[0].id + 1 : 1
state.brandList.unshift({ id, ...brand })
},
editBrandMutations(state, brand) {
// 查询待编辑的数据下标
let index = state.brandList.findIndex(item => item.id === brand.id)
// 更新数据
state.brandList[index].bname = brand.bname
state.brandList[index].bprice = brand.bprice
},
delBrandMutations(state, brand) {
// 通过过滤删除
state.brandList = state.brandList.filter(item => item.id !== brand.id)
}
},
actions: {
// 数据异步单元
// 添加品牌数据的异步函数
addBrandActions(context, brand) {
// TODO axios发送异步请求,向接口新增数据
// 调用mutation函数,完成数据同步
console.log("addBrandList函数被Vue组件调用执行了")
context.commit('addBrandMutations', brand)
},
editBrandActions(context, brand) {
// axios发送异步请求,调用接口完成数据更新
// 调用mutations函数,完成数据同步
context.commit('editBrandMutations', brand)
},
delBrandActions(context, brand) {
context.commit('delBrandMutations', brand)
}
},
getter: {
// 数据计算单元
brandCount(state) {
// 类似vue中的computed计算属性
return state.brandList.length
}
}
})
export default store

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

解耦合:

  • mapState('A',['a1'])     引入子模块A中的数据存储单元的a1属性     写在computed模块  前面加...是ES6中的展开运算符号
  • mapActions('B',['b1'])    引入子模块A中的数据异步单元的b1属性     写在methods模块 

 

 

 

二、VUEX项目思路

1、加载全部数据

        ①src下新建文件夹 store 其中的文件index.js

        index.js的内容: 引入依赖、注册插件、创建vuex数据管理模块(状态仓库)

        ②状态仓库的state里面存放数据

        ③在main.js中引入状态仓库

        ④通过列表渲染指令将数据渲染到表格中

2、添加数据

        ①编写增加数据按钮,并注册点击事件

        ②写弹窗组件 brandDialog  表格和按钮

            获取父组件brand里面的“dialogVisible”;

            添加v-if指令 用来判断是否显示 v-if的变量:dialogVisible;

            表单内容:表单中整个数据以及各个属性键值对;

            导出数据:数据即数据表,数据表中数据的获取是通过v-model;

            给提交按钮注册事件submit用于提交数据

                    submit函数:调用状态仓库中的actions(数据异步单元)

                    index中的actions调用mutations(数据同步单元)中的方法

                    index中的mutations调用state中的数据

                    最后操作数据

        ②点击事件内容:显示弹窗

3、删除数据

4、编辑数据

5、数据显示

        首先在brand模块的创建周期中调用actions函数;

        其次在store状态仓库里的actions数据异步单元新建actions函数

                在store状态仓库里的actions函数中先发送异步请求,再将异步请求的返回值提交到mutations数据同步单元;

        然后在mutations数据同步单元里调用state数据存储单元,给存储单元中的brandList赋值;

        最后将数据渲染到页面->通过v-for指令直接调用state数据存储单元中的数据。

三、总结

以上就是对VUE项目的简单总结,技术栈中也包含有VUEX,不足之处烦请指正。

版权声明:本文为[前端学习在路上]所创,转载请带上原文链接,感谢。 https://blog.csdn.net/qq_51386142/article/details/125397773