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中记录下来,点击那个小圆圈。
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Vuex初级入门及简单案例的更多相关文章

  1. Sping AOP初级——入门及简单应用

    在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是和业 ...

  2. Spring AOP初级——入门及简单应用

      在上一篇<关于日志打印的几点建议以及非最佳实践>的末尾提到了日志打印更为高级的一种方式——利用Spring AOP.在打印日志时,通常都会在业务逻辑代码中插入日志打印的语句,这实际上是 ...

  3. Unity3D Shader 入门之简单案例的实现(通过法线实现颜色变化)

    在没有接触Unity3D  Shader 之前,总感觉shader特别神奇,因为听说是对渲染流水线进行编程,就是对GPU进行编程.听着特别高大上.这不,最近刚刚接触Shader,学了几个小案例,然后本 ...

  4. Spring Boot【快速入门】简单案例

    Spring Boot[快速入门]   Spring Boot 概述 Build Anything with Spring Boot:Spring Boot is the starting point ...

  5. mui初级入门教程(四)— 再谈webview,从小白变“大神”!

    文章来源:小青年原创发布时间:2016-06-05关键词:mui,html5+,webview转载需标注本文原始地址: http://zhaomenghuan.github.io/#!/blog/20 ...

  6. mui初级入门教程(三)— html5+ XMLHttpRequest 与mui ajax用法详解

    文章来源:小青年原创发布时间:2016-05-29关键词:mui,html5+,XMLHttpRequest,ajax,懒加载转载需标注本文原始地址: http://zhaomenghuan.gith ...

  7. 响应式Web初级入门

    本文来自我的前端博客,原文地址:http://www.hacke2.cn/about-responsive/ 跨终端时代的到来 当你乘坐各种交通工具(公交.地铁.轻轨.火车)时你会发现,人们都个个低下 ...

  8. Linux初级入门(第一次作业)

    Linux初级入门 在本科期间学过一些Linux的简单命令,再次接触Linux不仅巩固了知识还学习到了很多新的东西. 什么是操作系统? 操作系统,英文名称Operating System,简称OS,是 ...

  9. Spring Cloud实战之初级入门(四)— 利用Hystrix实现服务熔断与服务监控

    目录 1.环境介绍 2.服务监控 2.1 加入依赖 2.2 修改配置文件 2.3 修改启动文件 2.4 监控服务 2.5 小结 3. 利用hystrix实现消费服务熔断 3.1 加入服务熔断 3.2 ...

随机推荐

  1. 带着萌新看springboot源码09(springboot+JdbcTemplate)

    emmm.....常规开局,继续说一下废话,前面简单的说了一下spring的ioc容器创建原理(花了不少时间去看了别人的博客+查了不少资料+自己的理解),相信大家对ioc容器有了一个初步的认识了. s ...

  2. Shell从入门到精通进阶之二:Shell字符串处理之${}

    上一章节讲解了为什么用${}引用变量,${}还有一个重要的功能,就是文本处理,单行文本基本上可以满足你所有需求. 2.1 获取字符串长度 # VAR='hello world!' # echo $VA ...

  3. [五]基础数据类型之Short详解

      Short 基本数据类型short  的包装类 Short 类型的对象包含一个 short 类型的字段      原文地址:[五]基础数据类型之Short详解   属性简介   值为  215-1 ...

  4. http无状态

    说http无状态,客户端请求,建立一个链接,请求完毕既会关掉连接,避免占用通道,对处理业务逻辑没有记忆功能

  5. Oracle day05 索引_数据去重

    索引 自动:当在表上定义一个primary key或者unique 约束条件时,oracle数据库自动创建一个对应的唯一索引. 手动:用户可以创建索引以加速查询 在一列或者多列上创建索引: creat ...

  6. Android开发过程中的坑及解决方法收录(六)

    1. file.listFiles 空指针异常 最近在弄个小项目,类似一个文件管理器,需要获得手机存储里的目录之后显示,但是运行过程中出现错误,搜索了资料,得出了以下的解决办法 问题产生的原因: an ...

  7. Token&Cookies&Session

    title: Token&Cookies&Session date: 2018-04-19 19:52:01 tags: [vue,token,cookies,session,logi ...

  8. [LeetCode] 1. Two Sum 两数之和

    Part 1. 题目描述 (easy) Given an array of integers, return indices of the two numbers such that they add ...

  9. css transition 实现滑入滑出

    transition是css最简单的动画. 通常当一个div属性变化时,我们会立即看的变化,从旧样式到新样式是一瞬间的,嗖嗖嗖!!! 但是,如果我希望是慢慢的从一种状态,转变成另外一种状态,怎么办?  ...

  10. vue2.x 给一个对象里添加一个没有的属性

    obj = {...obj, name:'addName'} //给obj对象 添加一个name字段,并且赋值为‘addName’ 参考: