vue组合api及store状态管理库
vue3合成API——setup()
作用：之前vue对象规定了我们必须把某一类数据放到某一个个结构，这样在一定程度上对我们的代码进行了强制的分离。在vue3中我们引入setup（）合成API语法，它可以将某些数据关联的内容整合到一个部分，即使setup（）中的内容越来越多，也会围绕着大而不乱的形式开发项目。
特点：1.setup()结构中定义的变量，函数都需要return之后才可以在模板中使用（变成响应式数据）。
2.setup（）是处于created生命周期之前的函数，data，methods中的数据是无法访问到的，setup（）结构中的this指向undefined。在setup（）之前还要引用。
3.在setup()生命周期函数 里面用后面一栏的语句，图片的左侧是2.0版本，右侧是3.0版本
4.生命周期函数写在里面还是写在外面有什么区别?
里面：生命周期函数写在里面的话 要先用setup（）里面是oncreate onMounted 用的是on这个前缀来访问组件的生命周期钩子
外面:生命周期函数写在外面的话 created mounted
4.各种生命周期函数的意思：
//vue对象的生命周期函数
beforeCreate() {
console . log( ' beforeCreate:vue对象创建成功之前');
},
created() {
console . log( ' created:vue对象创建成功之后');
},
-----------------------------------------------------------------------------------------
beforeMount() {
console. log( ' beforeMount:view（页面dom元素）与mode1（vue对象）绑定成功之前');
},
mounted() {
console. log( ' mounted:view与mode1（页面dom元素）绑定成功之后');
},
-----------------------------------------------------------------------------------------
beforeUpdate() {
console. log( ' beforeUpdate :view或mode1数据更新之前' );
},
updated() {
console. log( 'updated:view或mode1数据更新之后');
},
-----------------------------------------------------------------------------------------
beforeDestroy() {
console . log( ' beforeDestroy:vue对象销毁之前');
},
destroyed() {
console.log('destroyed:vue对象销毁之后');
}
5.什么是生命周期函数？
定义：从创建之初到销毁的过程。
人在特定的时间做特定的时期，特定的生命周期做特定的事情
vue项目中配置状态管理库vuex的流程
1.下载并引入vuex相关内容
import {creatsStore} from 'vuex'
2.创建状态管理库对象store
const store = createStore({
})
3.对外抛出store对象
export default store;
4.在main.js中将store对象与当前项目关联
createApp(app).use(router).use(store).mount('#app')
store状态管理库对象重要组成部分
state：组件之间共享的数据集合
组件中获取方法
1.直接获取
this.$store.state.xxx;
2.使用对象运算符mapState的形式获取
...mapState(['xxx','xxx'])
getters：相当于store对象计算属性（主要用于对state的数据进行过滤）
组件中获取方法
1.直接获取
this.$store.getters.xxx；
2.使用对象运算符mapGetters的形式获取
...mapGetters(['xxx','xxx'])
mutations：定义了修改store对象中state数据的同步方法（要修改的数据不是ajax异步获取的）
直接使用commit触发
this.$store.commit（'xxxx'，'传递的参数'）
actions：修改state数据的异步方法
直接使用dispatch触发store中actions中定义的函数
组件中如何触发
1.直接使用commit触发
this.$store.commit（'xxxx'，'传递的参数'）
2.使用对象展开运算符mapMutations的形式获取
...mapMutations(['xxx','xxx'])
