欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  IT编程

简述对Vuex的理解

程序员文章站 2022-06-30 19:27:42
1.什么是Vuex: Vuex是一个专为Vue.js应用程序开发的状态管理模式。 2.使用Vuex的原因: 当我们遇到多个组件共享状态时,多层组件的传值非常繁琐,不利于维护,因此我们把组件的共享状态抽取出来,以一个单例模式管理,在这种模式下,不管在哪个组件都可以获取状态或触发行为 3.什么情况下使用 ......
 
    1.什么是vuex:
            vuex是一个专为vue.js应用程序开发的状态管理模式。
    2.使用vuex的原因:
            当我们遇到多个组件共享状态时,多层组件的传值非常繁琐,不利于维护,因此我们把组件的共享状态抽取出来,以一个单例模式管理,在这种模式下,不管在哪个组件都可以获取状态或触发行为
    3.什么情况下使用:
            <1>虽然vuex可以帮助我们管理共享状态,但是也附带了更多的概念和框架,增加了学习成本,所以决定是否要使用vuex要对短期和长期效益进行权衡。
            <2>如果应用够简单,最好不要使用vuex;如果需要构建一个中大型单页应用,可以考虑使用vuex去更好的再组件外部管理状态。
    4.如何使用vuex:
            <1>每一个vuex应用的核心就是store(仓库),它包含着应用中大部分的状态(state),store是内存机制,而不是缓存机制,当前页面一旦刷新挥着通过路由跳转亦或是关闭,都会导致store初始化。
            <2>vuex的核心概念分别是:
                    (1)state: 存放基本数据   ----辅助函数mapstate: 当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用 mapstate 辅助函数帮助我们生成计算属性,让你少按几次键。
                    (2)getters:是从store中的state派生出来的状态,专门来计算state中的数据,相当于state中数据的计算属性  ---辅助函数mapgetters辅助函数: mapgetters 辅助函数仅仅是将 store 中的 getters 映射到局部计算属性,与state类似
                   (3)actions:  是专门操作异步请求的数据和业务逻辑的地方,它不能直接变更state中的状态,而是通过commit来调用mutations里的方法来改变state里的数据。 ---辅助函数mapactions 将组建的methods映射为store.dispath调用
                    (4)mutations:提交mutions是更改vuex中的状态的唯一方法。mutations必须是同步的,如果要异步需要使用actions。每一个mutations都有一个字符串作为第一个参数,提交载荷作为第二个参数。 ---辅助函数mapmutations 将组建中的methods映射为store.commit调用。
                    (5)moules:使用单一状态树,导致应用的所有状态几种到一个很大的对象,但是,当应用变得很大时,store对象会变得臃肿不堪,为了解决以上问题,vuex允许我们将store分割到模块(modules)。每个模块拥有自己的state、mutations、avtions、grtters。
            <3>当组件进行数据修改的时候我们需要调用dispatch来触发actions里面的方法。actions里面的每个方法中都会 有一个commit方法,当方法执行的时候会通过commit来触发mutations里面的方法进行数据的修改。 mutations里面的每个函数都会有一个state参数,这样就可以在mutations里面进行state的数据修改 ,当数据修改完毕后,会传导给页面。页面的数据也会发生改变