目录

一、知识点疑点

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，不足之处烦请指正。