状态管理库的流程:VUEX

Vuex定义：是一个专为vue.js应用程序开发的状态管理库，状态就是指组件之间共享的数据

vue项目中配置状态管理库vuex的流程

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

import { createStore} from "vuex";

2.创建状态管理器对象store

const store=createStore({})

3.对外抛出store对象

3.对外抛出store对象
export default store

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

//将配置好的store对象与当前vue相关联
createApp(App).use(router).use(store).mount('#app')

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

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

组件中获取方法 

 1.直接获取的形式this.$store.state.xxx
2.使用对象展开运算符的形式获取...mapState(['count','users'])

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

组件中获取方法 

1.直接获取                                           
         getAdults(){
                return this.$store.getters.adults
            },

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

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

组件中获取方法 

1.直接使用commit触发this.$store.commit('xxx','传递的参数'）
2.使用对象展开运算符mapMutations的形式获取...mapMutations(['xxx','xxx'])

actions:定义了修改state数据的异步方法(修改数据是ajax获取的异步数据)

组件中获取方法 

1.直接使用dispatch触发this.$store.dispatch(xxx,’传递的参数’)

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