状态管理库的流程:VUEX

发布时间:2022-06-08 发布网站:脚本宝典
脚本宝典收集整理的这篇文章主要介绍了状态管理库的流程: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.xxx2.使用对象展开运算符的形式获取...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']))

 

脚本宝典总结

以上是脚本宝典为你收集整理的状态管理库的流程:VUEX全部内容,希望文章能够帮你解决状态管理库的流程:VUEX所遇到的问题。

如果觉得脚本宝典网站内容还不错,欢迎将脚本宝典推荐好友。

本图文内容来源于网友网络收集整理提供,作为学习参考使用,版权属于原作者。
如您有任何意见或建议可联系处理。小编QQ:384754419,请注明来意。
标签: