状态管理库vuex与生命周期函数

如何配置：

1.下载并引入vuex相关内容

import {createStore } from 'vuex

2.创建状态管理库对象

const store=createStore（{       }）

3.对外抛出store对象

export default store；

4.在main.js中将store对象与当前项目相关联

createApp（App）.user(router).user(store).mount('#app')

store状态管理库对象重要组成部分

state:组件之间共享的数据集合

组件中获取方法

1.直接获取：this.$store.state.xxx;

2.使用对象展开运算符的形式获取  ...mapState（[‘xxx’，‘xxx’]）

getters：相当于store对象计算属性（主要用于对state的数据进行过滤

组件中获取方法

1.直接获取 this.$store.getters.xxx;

2.使用对象展开运算符mapGetters(['xxx','xxx'])

mutations:定义了修改store对象中state数据的同步方法（要修改的数据不是Ajax异步获取的）

组件中获取

1.直接用commit触发this.$store.commit('xxxx','传递的参数')

2.使用对象展开运算符mapMutaions的形式获取...mapMutations(['xxx','xxx'])

actions定义了修改state数据的异步方法（修改数据是Ajax获取的异步数据）

组件中如何触发

1.直接用dispatch触发

this.$store.dispatch('xxx','传递的参数')

2.使用对象展开运算符mapActions的形式获取

...mapActions(['xxx,'xxx'])

生命周期函数

由 vue 框架提供的 内置函数 ，会伴随着组件的生命周期，自动按次序执行。

beforeCreate(){
      console.log('beforeCreate:vue对象创建成功之前')
  },
  created(){
      console.log('created:vue对象创建成功之后')
  },
  beforeMount(){
      console.log('beforeMount:view与model绑定成功之前')
  },
   Mounted(){
      console.log('Mounted:view与model绑定成功之前')
  },
  beforeUpdata(){
      console.log('beforeUpdata:view与model数据更新之前')
  },
  Updataed(){
      console.log('Updataed:view与model数据更新之后')
  },
  beforeDestory(){
      console.log('beforeDestory:vue对象销毁之前')
  },
  Destoryed(){
      console.log('Destoryed：vue对象销毁之后')
  },