文档章节

Vuex入门

wftt
 wftt
发布于 2018/04/19 18:44
字数 1294
阅读 141
收藏 1

1.Vuex是什么?

官网解释:Vuex是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。

刚接触Vuex,看这么官方的解释可能也没什么帮助!了解了下它的用处,操作了简单demo后,我对它大概有个初步的了解。我认为Vuex充当着一个“桥梁”的角色,它方便了多个类似组件间共用一个资源,进行传值,对于量大的项目实现起来更加高效!以上是我的个人见解,希望指点和交流!

2.Vuex的安装

Vuex也有多种安装方式,在这里依然采用npm进行安装。

npm install vuex --save

如果出现下图,表明安装完成。

此时,可以在package.json文件中查看到vuex已经安装好,如图:

3.Vuex项目

依然要通过vue-cli脚手架来搭建一个项目,这里介绍一下cnpm的安装与使用。

安装淘宝镜像:

npm install -g cnpm --registry=https://registry.npm.taobao.org

测试是否安装成功:

cnpm -v

如果出现对应的版本号,表明安装成功,就可以使用cnpm了。

全局安装vue-cli:

cnpm install -g vue-cli

测试是否安装成功:

vue -V

初始化项目:

vue init webpack-simple vuex-demo

打开项目:

//进入文件夹下
cd vuex-demo
//安装依赖
cnpm install 
//运行服务
cnpm run dev

父子组件中传值,之前说到过要用props或者$emit.

实现效果:两个模块内容一样

分析:如果是在父组件中有个公共资源,子组件使用需要标签绑定一下,然后通过props传递值才能使用.然后相同的东西全都是拷贝两份,如果多个呢?这样就不太合理了,因此来学习Vuex的使用。

上面已经进入到项目中,接下来安装好Vuex,在src下新建文件夹store并新建文件store.js.然后在main.js中引入新建的store.js,并在实例化对象中使用.

//这是store.js文件
//引入Vue和Vuex
import Vue from 'vue'
import Vuex from 'vuex'

在Vue中使用Vuex
Vue.use(Vuex)

//定义store并允许外部使用,把公共资源products提取出来,放在state下
export const store = new Vuex.Store({
	state:{
		products:[
	        {name:"A",price:200},
	        {name:"B",price:140},
	        {name:"C",price:20},
	        {name:"D",price:10},
        ]
	}
})
//这是main.js文件
//main.js引入store.js
import {store} from './store/store'

new Vue({
  store:store,
  el: '#app',
  render: h => h(App)
})

然后在App.vue中删除公共数据products以及组件标签的绑定信息.

//这是App.vue
<template>
  <div id="app">
    <!--不使用Vuex前-->
    <!-- <product-list-one v-bind:products="products"></product-list-one>
    <product-list-two v-bind:products="products"></product-list-two> -->
    <product-list-one></product-list-one>
    <product-list-two></product-list-two>
  </div>
</template>

<script>
import ProductListOne from './components/ProductListOne.vue'
import ProductListTwo from './components/ProductListTwo.vue'
export default {
  name: 'app',
  components:{
    'product-list-one':ProductListOne,
    'product-list-two':ProductListTwo
  },
  data () {
    return {
      //共用资源
      // products:[
      //   {name:"A",price:200},
      //   {name:"B",price:140},
      //   {name:"C",price:20},
      //   {name:"D",price:10},
      // ]
    }
  }
}
</script>

<style>

</style>

然后,分别在两个组件中删除原来的props以及data,使用computed.

<script>
export default {
  //这是未使用Vuex前
  // props:["products"],
  // data () {
  //   return {
      
  //   }
  // }

  //使用computed来得到products的值
  computed:{
    products(){
      return this.$store.state.products;
    }
  }
</script>

这样就简单使用了Vuex,使用了state,Vuex有五大核心:State、Getter、Mutation、Action、Module.下面继续介绍.

State:用来存储数据

Getter:用来获取数据

针对上面项目的基础,如果此时需要显示信息价格为原数据的5折,这时候需要定义方法:

//html中products换为对应的saleProducts
<li v-for="product in saleProducts">
    <span class="name">{{product.name}}</span>
    <span class="price">${{product.price}}</span>
</li>

//定义的打折方法
saleProducts(){
   //取到数据后进行修改
   var saleProducts = this.$store.state.products.map(product=>{
      return {
         //新的展示样式
         name:"**" + product.name +"**",
         price:product.price / 2
      }
   })
   //返回最后的数据
   return saleProducts;
}

同理,两个组件都需要这么写,也有点累赘。那么在store.js中提取方法

getters:{
    //state就是上面state里面的product数据
	saleProducts:(state)=>{
	     var saleProducts = state.products.map(product=>{
	        return {
	          name:"**" + product.name +"**",
	          price:product.price / 2
	        }
	      })
	     return saleProducts;
    }
},

然后,在组件中直接返回数据即可,是不是很容易了呢!

//定义的打折方法
saleProducts(){
  //返回最后的数据,直接调用store.js中getters下的方法即可
   return this.$store.getters.saleProducts;
}

Mutation:用来触发事件改变

在组件中添加一个按钮,点击一下降价.

//html
<button @click="reducePrice">商品降价</button>


//script
methods:{
    reducePrice:function(){
       this.$store.state.products.forEach(product=>{
         product.price -= 1;
       })
    }
}

当然,这样就可以了。我们使用mutation来实现一下:

mutations:{
	reducePrice:(state)=>{
			state.products.forEach(product=>{
        		product.price -= 1;
      		})
		}
	}
}
reducePrice:function(){
   this.$store.commit('reducePrice');
}

Action:提交Mutation、异步操作

如果要点击按钮后滞后2s达到效果呢?这个时候需要action.

actions:{
	reducePrice:(context,payload)=>{
		setTimeout(function(){
			context.commit('reducePrice',payload);
		},2000)
	}
}
reducePrice:function(amount){
   this.$store.dispatch("reducePrice",amount);
}

Module:模块化

最后说一下mapGetters和mapActions.

安装babel:

cnpm install babel-preset-stage-2 --save-dev

它的主要功能就是多个方法,引入之后可以直接在...mapGetters/...mapActions里面写一下就可以了,直接调用store.js中的方法.

<script>
//引入
import {mapGetters} from 'vuex'
import {mapActions} from 'vuex'

export default {
  computed:{
    products(){
      return this.$store.state.products;
    },
    ...mapGetters([
      "saleProducts"
    ])
   //多个方法,注释掉直接使用mapGetters
    // saleProducts(){
    //   // var saleProducts = this.$store.state.products.map(product=>{
    //   //   return {
    //   //     name:"**" + product.name +"**",
    //   //     price:product.price / 2
    //   //   }
    //   // })
    //   // return saleProducts;
    //   return this.$store.getters.saleProducts;
    // }
  },
  methods:{
    // reducePrice:function(amount){
    //   // this.$store.state.products.forEach(product=>{
    //   //   product.price -= 1;
    //   // })
    //   // this.$store.commit('reducePrice');
    //   this.$store.dispatch("reducePrice",amount);
    // }
    //同理
    ...mapActions([
      "reducePrice"
    ])
  }
}
</script>

 

© 著作权归作者所有

wftt
粉丝 11
博文 38
码字总数 24507
作品 0
海淀
前端工程师
私信 提问
Vuex对比Redux学习Vuex

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/wen_special/article/details/88868872 之前接触过react框架中通过redux处理数据流。来到新公司,接触到新框架...

wen_special
03/28
0
0
用150行代码实现Vuex 80%的功能

作者: 殷荣桧@腾讯 本文地址,欢迎查看 本文github仓库代码地址,欢迎star,谢谢。 如果你对自己用少量代码实现各个框架感兴趣,那下面这些你都可以一看: build-your-own-react build-your-...

殷荣桧
02/13
0
0
Vuex入门(3)—— getters,mapGetters,...mapGetters详解

上一章讲了state的相关内容,如果说state对应vue中的data的话,那么getters就相当于vue中的computed,本章来详细了解下vuex的getters属性。 Vuex提供了state这样的状态统一管理树,你可以在v...

闲人王昱珩
07/18
0
0
真正掌握vuex的使用方法(一)

导语:vuex是什么?我的理解就是vuex是一个管理者,管理的方式是集中式管理,管理的对象即是vue.js应用程序中的众多组件的共享部分。学习的过程当中,希望按照我的步骤一步一步来进行练习! ...

张培跃
2018/05/17
0
0
让你也学会某开源平台的vuex模块化源码应用

先告诉阅读本篇文章的同学本人水平有限,菜鸟一只:smile:。 继上次分享了在vue官方文档的一些小细节,很多大佬说基本操作,不够深,多看看源码 其实本人也只是个小菜鸟,来分享的也是自己学习...

龙小胖
08/19
0
0

没有更多内容

加载失败,请刷新页面

加载更多

OSChina 周六乱弹 —— 早上儿子问我他是怎么来的

Osc乱弹歌单(2019)请戳(这里) 【今日歌曲】 @凉小生 :#今日歌曲推荐# 少点戾气,愿你和这个世界温柔以待。中岛美嘉的单曲《僕が死のうと思ったのは (曾经我也想过一了百了)》 《僕が死の...

小小编辑
今天
1K
12
Excption与Error包结构,OOM 你遇到过哪些情况,SOF 你遇到过哪些情况

Throwable 是 Java 中所有错误与异常的超类,Throwable 包含两个子类,Error 与 Exception 。用于指示发生了异常情况。 Java 抛出的 Throwable 可以分成三种类型。 被检查异常(checked Exc...

Garphy
今天
32
0
计算机实现原理专题--二进制减法器(二)

在计算机实现原理专题--二进制减法器(一)中说明了基本原理,现准备说明如何来实现。 首先第一步255-b运算相当于对b进行按位取反,因此可将8个非门组成如下图的形式: 由于每次做减法时,我...

FAT_mt
昨天
30
0
好程序员大数据学习路线分享函数+map映射+元祖

好程序员大数据学习路线分享函数+map映射+元祖,大数据各个平台上的语言实现 hadoop 由java实现,2003年至今,三大块:数据处理,数据存储,数据计算 存储: hbase --> 数据成表 处理: hive --> 数...

好程序员官方
昨天
44
0
tabel 中含有复选框的列 数据理解

1、el-ui中实现某一列为复选框 实现多选非常简单: 手动添加一个el-table-column,设type属性为selction即可; 2、@selection-change事件:选项发生勾选状态变化时触发该事件 <el-table @sel...

everthing
昨天
17
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部