脚本宝典收集整理的这篇文章主要介绍了状态管理库的流程: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,请注明来意。