1.为什么要使用Vuex？
（1）方便所有组件共享信息，方便不同组件共享信息。
（2）某个组件需要修改状态和需求。

2.状态有哪些？
（1）组件内部定义的data状态（通过组件内部修改）
（2）组件外部来的props（通过组件外部修改）
（3）Vuex里的state（组件内部和外部都可以修改）

3.安装Vuex
方法一：官网的安装处有网址，点开存储为成文件，引入你要写的项目就可以。  此方法需要在项目中用script引入。
方法二：npm install vuex --save
yarn add vuex

4.引入
Vue.use(Vuex)
const vm =new Vue({
     el:"root"
})
在浏览器中输入window.Vuex有打印的，表示引入成功。

5.Vuex的流程图
组件根据state状态渲染，多个组件可以共享state。不能再组件内部直接修改状态。
State状态的修改必需通过Mutations，Mutations里面存的是函数。
Actions通过Commit操作来调用异步数据，如果你的项目里没有调用异步数据的需求，你可以直接从组件调用Mutations。
Actions里面也是函数，通过Dispatch触发。
Mutatins可以跟踪所有的修改，保存修改的过程。意义是做时间穿梭，记录历史。而Actions没有此功能。

5.使用
Vue.use(Vuex)
var store  = new Vuex.Store({              //全局定义store
    state:{
         count：0
    },
    actions:{
    },
    mutations:{           
         increment（state，）{               //写一个函数，用来修改状态，需要调用一下。
                 state.count++                //是响应式的，可以直接修改值。
         }
    }
})
cosnt AddButton = {
template:"<button> {{count}}</button>'    //如果没有在自定义属性赋值，则在模板中写{{$store.state.count}}
}
const vm =new Vue({
el:"root", 
store        //把定义好的store注入到组件中。此时你在浏览器后台就可以通过写window.store来查看了
components:{
AddButton
}，
computed：{
count(){
return $store.state.count              //通过计算属性把state里的值保存在count里，再调用就会很方便。
}
},
methods:{
increment(){
this.$store.commit("increment")
}
}
})
<div id="root"> 
     {{$store.state.count}}            //此时在页面中就可以读到0了
    <att-button ><add-button>
</div>
<button @click="increment"></button>

时间旅行：每次通过mutations 改变值都会在浏览器的vue中记录下来，点击那个小圆圈。

转载于:https://www.cnblogs.com/kaiqinzhang/p/9967246.html

Vuex初级入门及简单案例相关推荐

  1. Android - JNI环境搭建和简单案例入门

    一.简单概念: JNI:Java Native Interface.实现java 与本地语言(android是linex系统开发的,语言是c/c++) 的相互调用. NDK:Native Develo ...

  2. 视频教程-①Spring Cloud 第一季(初级入门篇)-Java

    ①Spring Cloud 第一季(初级入门篇) 2011年毕业后在澳门 遊澳集团(UO Group)旗下某IT科技公司从事 android,php,j2ee开发工作,负责 国际短信发送系统.银联支付 ...

  3. Node 10.0+ 初级入门-姜威-专题视频课程

    Node 10.0+ 初级入门-97人已学习 课程介绍         随着"大前端战略"的技术革新,前端工程师的项目领域也变得异常宽广,从客户体验的设计层面,延伸到流畅性,稳定性 ...

  4. HTML5与CSS3初级入门-姜威-专题视频课程

    HTML5与CSS3初级入门-259人已学习 课程介绍         本课程属于<初级的前端工程师系列>课程之一,本课程以初级入门前端,了解HTML5和css3,课程深入浅出,通过不同情 ...

  5. 视频教程-HTML5与CSS3初级入门-HTML5/CSS

    HTML5与CSS3初级入门 全栈工程师.2000年建设第一网站项目起,15年行业经验,从早期WAP到APP,从SP.IVR到流媒体,云框架: 项目解决顾问. 姜威 ¥39.00 立即订阅 扫码下载「 ...

  6. 视频教程-ThinkPHP5实现QQ快捷登录初级入门-PHP

    ThinkPHP5实现QQ快捷登录初级入门 2009年4月创办 淄博日诺网络科技有限公司 法人总经理 2016年负责 中国传媒大学凤凰学院 网站开发 项目负责人 2017年 参与负责 用友软件理财项目 ...

  7. vuex 基本入门和使用（二）

    vuex 基本入门和使用(二) vuex 版本为^2.3.1,按照我自己的理解来整理vuex. 关于 state 每个vuex 应用只有一个 store 实例,所以使用起来不会太复杂,对于定位错误状态 ...

  8. vue2 + vue-router + vuex + iview 入门项目

    简单的vue2 + vue-router + vuex + iview 入门项目,一个移动端平台的简易考试系统.灵感来源于近期工作项目中开发的一套考试平台系统.欢迎大家来issues指出错误共同进步. ...

  9. mui初级入门教程（六）— 模板页面实现原理及多端适配指南

    文章来源:小青年原创 发布时间:2016-07-26 关键词:mui,webview,template,os,多端适配 转载需标注本文原始地址: http://zhaomenghuan.github. ...

最新文章

  1. 超越卷积、自注意力机制：强大的神经网络新算子involution
  2. 第四季度数据中心网络设备销量达35亿美元
  3. Android中绘制圆形和圆角图片
  4. CLR via C# 笔记系列 - clr的执行模型
  5. c语言记录五个数组编程,C语言经典编程之数组
  6. Magicodes.IE 2.5.4.2发布
  7. [Java基础]字符流读写数据的方式
  8. webpack——快速入门【一】
  9. 探秘Runtime - Runtime介绍
  10. 复制网页文本的几种方法
  11. python编译器哪个最好用_python编写器哪个好用？
  12. 替换空格——python
  13. 转：PV、UV、访问次数、跳出率、转化率、平均访问时长
  14. java项目笔记 - 第16章：坦克大战1.0
  15. SPI 读取不同长度 寄存器_几种常用的总线设计:UART/SPI/I2C
  16. python卡方检验关键词,Python卡方检验
  17. 100+实用功能合集，手机中的神器，黑科技中的战斗鸡！
  18. 25G SFP28 SR多模和LR单模光模块的介绍及区别
  19. 嵌入式计算机示例及应用
  20. 由 tpp.c:63: __pthread_tpp_change_priority failed 引发的思考

热门文章

  1. java反射获取实现类_Java介绍通过反射获取类的信息
  2. android http 416,HTTP 416 错误 – 所请求的范围无法满足 (Requested Range not satisfiable)...
  3. 莫队--2038: [2009国家集训队]小Z的袜子(hose)
  4. css的position属性取值
  5. 正则表达式（思维导图速查版）
  6. 栈和递归---手动实现一个栈和蒜头君吃桃
  7. Mail.Ru Cup 2018 Round 2: D. Refactoring（模拟+KMP）
  8. 牛客练习赛20：A. 礼物（组合数学/小球与盒子问题）
  9. bzoj 1637: [Usaco2007 Mar]Balanced Lineup
  10. bzoj 1639: [Usaco2007 Mar]Monthly Expense 月度开支（二分）