Vuex

Vuex:是一个集中式状态管理工具,相当于react中的 redux

    1) 主要解决的问题:大中型项目中复杂组件通讯问题

  2)  vuex操作流程:

            dispatch                  commit

vue组件---------------->actions------------>mutations------->state-------->vue组件更新

3)vuex的重要概念:      

    state:要保存的状态       

   mutations:是最终改变状态的方法集,

mutations中的代码是同步执行的     

     actions:4)

使用步骤:    

    第一步:先安装vuex       

       npm install vuex --save   

   第二步:在src创建一个store目录,用来存放vuex相关文件    

    第三步:在store目录先创建一个index.js文件,做为vuex入口文件   

   第四步:在store目录的index.js中,写入下面的内容

//引入vuex,vueimportVuexfrom'vuex';importVuefrom'vue';

//让vue识别vuexVue.use(Vuex);

//存储状态

conststate={

    userinfo:{

        username:'张三',

            age:20,

            token:'1001'

        }       

   }

//将vuex暴露出去

exportdefaultnewVuex.Store({               

             state                

        });   

第五步:在main.js中引入store,并在newVue中注册

//引入vuex

    importstorefrom'./store';

    newVue({    

        .......         

         store,     

         ........        

    }); 

第六步:如何获取和设置数据

  获取:在对应组件的computed中处理   

   即:this.$store.state来获取 

设置/修改数据:通过commit到mutations来修改state

如何提高vuex的使用体验:

1.优化state写法import{matpState}from'vuex'

在计算属性中添加下面的内容:

computed:{

//组件的计算属性

str() {

    return"hello"+this.msg      

  },

//vuex的数据

...mapState({  

          address:'address', 

           userinfo:'userinfo'})   

         }

    }

2.优化actions,mutations

import{ mapState,mapActions,mapMutations  }from'vuex'; 

     ...mapActions(['gomodify','aa','bb']),

      ...mapMutations(['setValue']),

3.隔离vuex各部分,提高可维护性

©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 姓名:岳沁 学号:17101223458 转载自:http://blog.csdn.net/h5_queensty...
    丘之心阅读 2,155评论 0 1
  • 安装 npm npm install vuex --save 在一个模块化的打包系统中,您必须显式地通过Vue.u...
    萧玄辞阅读 2,962评论 0 7
  • vuex是一个状态管理模式,通过用户的actions触发事件,然后通过mutations去更改数据(你也可以说状态...
    Ming_Hu阅读 2,036评论 3 3
  • Vuex是什么? Vuex 是一个专为 Vue.js应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件...
    萧玄辞阅读 3,133评论 0 6
  • Vuex 是什么? ** 官方解释:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式**。它采用集中...
    Rz______阅读 2,316评论 1 10