vuex记录

vuex就是vue中管理状态的地方,控制着组件之间的数据;

   5大核心,通常只要有state和mutation就能满足vuex最基本的需求

1.state 项目存放各种状态的地方

2.mutation 修改数据的方法,修改简单同步数据

3.Action 类似mutation,不同是用commit提交mutations方法,让mutation改变state数据,也就是间接的改变state数据

 那为什么有了mutation,也还有action,存在即正义

 将多个mutation方法,封装在一起调用,action的内部可以异步执行代码,而muatation中不可以

4.getter 数据监听地方,一旦改变数据,就会触发,就相当于vuex中的计算属性,类似vue中computed计算属性

5.module 可以在new Vuex.Store()里面使用,引用多个存放数据组件

 

总结:state和getter都可以获取全局存放状态,但是getter也是基于state的获取,getter用于重新包装state数据的地方,语法糖的使用,也很相近

    mutation和action都是用来存放修改state的方法,action是将mutation方法封装在一起调用,语法糖的使用也极为相近

 

state基本用法:

        

 

 

  调用方法1:适用于简单的项目里面,

      在computed中调用,通过this.$store.state来获取值

      

调用方法2:vuex已经封装好的语法糖,简单高效mapState

    ,引入语法糖

           语法糖的使用方法

 

 

 

mutation基本用法:

          

         调用方法1:适用于简单的项目,通过commit提交方法,来设置

         

 

        调用方法2:语法糖mapMutations

          

          

          也可以...mapMutations(['setNum',''addNum'])这样调用,不重新改名,直接调用就行

 

 

action基本用法 :默认接受一个commit来提交事件

      例:delaySetNum函数在2秒后调用mutation中的setNum方法

       

 

 

      调用方法1:通过dispatch调用action里面的函数

            

      调用方法2:语法糖mapActions

          

          

 

 mutations和actions的区别:

        都可以处理异步,但是mutations不能返回异步处理结果

        所以:如果异步处理的结果,外面不需要,就无所谓用mutations或者actions

        但是,如果外面需要异步处理的结果,就要用actions;

       

            组件中接收返回值:

 

          

 

 

 

 

 

 

getter基本用法:默认接受一个参数state,就是vuex中的state,重新计算属性

          

         调用方法1:也是在computed中调用

           

         调用方法2:使用语法糖mapGetters

           

           

 

module模块化:

        当应用非常复杂时,如果在使用单一的store,会造成引用相当的复杂,

        将store模块化,每一个模块又拥有自己的state,getter,mutation,action

         简单引入两个模块

         

 

 

 

        获取不同模块状态state还是很方便 

 

         

 

       但是getter,mutation,action就不可以,因为时全局注册,要想也在自己的模块中使用,就要设置namespaced: true,使其成为带命名的空间模块 

        

 

        开启之后调用方法就会自动加入一个模块命名

       例:1个调用a模块的setNum方法,另外一个调用b模块的setNum方法

        

 

 

 

 

小技巧:

       当mutation中方法名字过多,可以使用常量,将名字放在一个文件夹中,一目了然;

       严格模式,确保属性是通过mutation修改,不然会报错,仅仅是在开发模式下

      

 

 

       

posted @ 2019-12-02 15:12  fanbu  阅读(280)  评论(0编辑  收藏  举报