使用vuex简单的实现系统中的状态管理

     最近项目中用到了vue,其中状态的集中管理使用到了vuex,因此就学习vuex做一个简单的记录。vuex的官方网址如下: https://vuex.vuejs.org/zh-cn/  vuex

     当我们的项目慢慢做大的时候,各个父组件和子组件之间有些状态需要项目共享,比如用户在父组件中登录后,在各个子组件中需要用到登录信息,虽然可以使用父子组件之间的通选解决,但是使用vuex可以达到更好的效果。

     在vuex中有几个核心的概念:

     state : 这个就是父子组件中需要共享的状态,即共享的数据,比如用户的登录信息等

     action: 这个可以理解为执行的动作,这个里面可以执行一些逻辑的判断,判断最终需要提交那个mutation

     mutation: 在mutation中可以进行state中的数据的修改,其余的地方不建议进行state中数据的修改

官网上vuex的执行流程图。
    

在此我们简单的实现一个计数的小例子,实现父组件中的数据修改后,子组件中可以获取到数据的变化

程序中的代码结构如下
  
 1、创建vue项目  vue init webpack vue-study

 2、 cd vue-study

 3、 npm install

 4、安装vuex   npm install vuex --save

 5、创建上面代码中的store目录的文件

       store目录中各文件的内容

   main.js中的内容
  
 6、执行步骤:

7、执行结果

 

8、代码见附件中的 vue-study.zip 这个。
 
9、学习vuex时的一个思维导图 (示例中的例子二是本文中的例子,例子一是我刚学习vuex时的例子,可以看一下里面概念性的内容,部分内容也有截图指出)
 

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值