分分钟学会vue中vuex的应用(入门教程)


Posted in Javascript onSeptember 14, 2017

vuex.js

状态(数据)管理

在vue中当我们管理数据的时候比较乱,我们要用到下面的这个库,vuex.js

Vuex介绍

每一个Vuex应用的核心就是store(仓库),他是用来存储数据的

"store" 基本上就是一个容器,它包含着你的应用中大部分的状态(state)。Vuex 和单纯的全局对象有以下两点不同

1.Vuex 的状态存储是响应式的

2.你不能直接改变 store 中的状态

vuex有6个概念

  • Store(最基本的概念)(创库)
  • State (数据)
  • Getters(可以说是计算属性)
  • Mutations
  • Actions
  • Modules

让我们看看怎么来创建一个创库

store 用来储存数据(状态)

new Vuex.Store({})

数据我们放到state里面

state:{}

让我们看看怎么来读取里面的数据

store.state.数据

接下来让我们看看怎么去修改数据

mutations: {}

我们怎么调mutations的数据

用commit()方法来调用

接下来让我们做一个小效果来看一下vuex在vue中怎么应用

我们做一个购物车加减按钮的效果

运行效果

分分钟学会vue中vuex的应用(入门教程)

<div id="app"></div>

<template id="tpl">
  <div>
    <tip></tip>
    <but></but>
  </div>
</template>

<script>

  var store = new Vuex.Store({
    state:{
      count:0
    },
    mutations:{
      jia (state) {
        state.count++
      },
      jian (state) {
        state.count--
      }
    }
  });

  var vm = new Vue({
    el:"#app",
    template:"#tpl",
    components:{
      tip:{
        template:"<div>{{$store.state.count}}</div>"
      },
      but:{
        template:`
          <div>
            <input type="button" value="+" @click="$store.commit('jia')"/>
            <input type="button" value="-" @click="$store.commit('jian')"/>  
          </div>
        `
      }
    },
    store
  });
</script>

我们从store里面获取的数据最好放到计算属性中

当一个组件需要获取多个状态时候,将这些状态都声明为计算属性会有些重复和冗余。为了解决这个问题,我们可以使用mapState辅助函数帮助我们生成计算属性

下面我们做一个小的效果(注意:注释的计算属性和下面使用mapState辅助函数2个结果是相同的)

当映射的计算属性的名称与 state 的子节点名称相同时,我们也可以给 mapState 传一个字符串数组。

运行效果

分分钟学会vue中vuex的应用(入门教程)

<script>
  //我们从store里面获取的数据最好放到计算属性中
  var store = new Vuex.Store({
    state:{
      count:0,
      num1:1,
      num2:2
    },
    mutations:{
      jia (state) {
        state.count++
      },
      jian (state) {
        state.count--
      }
    }
  });
  var vm = new Vue({
    el:"#app",
    template:"#tpl",
    components:{
      tip:{
      //创建计算属性
      
        // computed:{
        //   count(){
        //     return this.$store.state.count;
        //   },
        //   num1(){
        //     return this.$store.state.num1;
        //   },
        //   num2(){
        //     return this.$store.state.num2;
        //   }
        // },
        //使用mapState辅助函数
        //computed:Vuex.mapState({
          // count:state=>state.count,
          //num1:state=>state.num1,
          //num2:state=>state.num2
        //}),
        //mapState 传一个字符串数组
        computed:Vuex.mapState(['count' , 'num1' , 'num2']),
        template:"<div>{{count}}{{num1}}{{num2}}</div>"
      },
      but:{
        template:`
          <div>
            <input type="button" value="+" @click="$store.commit('jia')"/>
            <input type="button" value="-" @click="$store.commit('jian')"/>  
          </div>
        `
      }
    },
    store
  });
</script>

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
popdiv
Jul 14 Javascript
用javascript实现在小方框中浏览大图的代码
Aug 14 Javascript
juqery 学习之三 选择器 子元素与表单
Nov 25 Javascript
JQuery EasyUI 日期控件如何控制日期选择区间
May 05 Javascript
微信小程序开发之toast提示插件使用示例
Jun 08 Javascript
用js将long型数据转换成date型或datetime型的实例
Jul 03 Javascript
基于Node.js模板引擎教程-jade速学与实战1
Sep 17 Javascript
js与jQuery实现获取table中的数据并拼成json字符串操作示例
Jul 12 jQuery
JavaScript实现构造json数组的方法分析
Aug 17 Javascript
vue+webpack dev本地调试全局样式引用失效的解决方案
Nov 12 Javascript
小程序实现多个选项卡切换
Jun 19 Javascript
react中的DOM操作实现
Jun 30 Javascript
JS中跳出循环的示例代码
Sep 14 #Javascript
JS验证码实现代码
Sep 14 #Javascript
快速将Vue项目升级到webpack3的方法步骤
Sep 14 #Javascript
浅谈vue中数据双向绑定的实现原理
Sep 14 #Javascript
JavaScript动态绑定详解
Sep 14 #Javascript
React-Native使用Mobx实现购物车功能
Sep 14 #Javascript
JavaScript requestAnimationFrame动画详解
Sep 14 #Javascript
You might like
php常用图片处理类
2016/03/16 PHP
php项目开发中用到的快速排序算法分析
2016/06/25 PHP
javascript 时间比较实现代码
2009/10/28 Javascript
Jsonp 跨域的原理以及Jquery的解决方案
2010/05/18 Javascript
web页面数据展示新想法(json)
2010/06/08 Javascript
基于jQuery的一个扩展form序列化到json对象
2010/12/09 Javascript
JavaScript中的eval()函数详解
2013/08/22 Javascript
排序算法的javascript实现与讲解(99js手记)
2014/09/28 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
2015/04/07 Javascript
AngularJS初始化静态模板详解
2016/01/14 Javascript
Vue进度条progressbar组件功能
2018/04/17 Javascript
基于layui数据表格以及传数据的方式
2018/08/19 Javascript
angular中子控制器向父控制器传值的实例
2018/10/08 Javascript
Python中条件选择和循环语句使用方法介绍
2013/03/13 Python
Python构造函数及解构函数介绍
2015/02/26 Python
Python扫描IP段查看指定端口是否开放的方法
2015/06/09 Python
python自动zip压缩目录的方法
2015/06/28 Python
浅谈Python 集合(set)类型的操作——并交差
2016/06/30 Python
python实现学生管理系统
2018/01/11 Python
Python利用Django如何写restful api接口详解
2018/06/08 Python
Python实现读写INI配置文件的方法示例
2018/06/09 Python
Python实例方法、类方法、静态方法的区别与作用详解
2019/03/25 Python
python中Lambda表达式详解
2019/11/20 Python
MNIST数据集转化为二维图片的实现示例
2020/01/10 Python
Pytorch如何切换 cpu和gpu的使用详解
2021/03/01 Python
HTML5之WebGL 3D概述(上)—WebGL原生开发开启网页3D渲染新时代
2013/01/31 HTML / CSS
HTML5中的Article和Section元素认识及使用
2013/03/22 HTML / CSS
深入解析HTML5 Canvas控制图形矩阵变换的方法
2016/03/24 HTML / CSS
教师找工作推荐信
2013/11/23 职场文书
高校教师思想汇报
2014/01/11 职场文书
国培教师自我鉴定
2014/02/12 职场文书
大学新生军训感言
2014/02/25 职场文书
二年级语文上册复习计划
2015/01/19 职场文书
幼儿园教师自我评价
2015/03/04 职场文书
失恋33天观后感
2015/06/11 职场文书
python flappy bird小游戏分步实现流程
2022/02/15 Python