全站最详细的Vuex教程


Posted in Javascript onApril 13, 2018

什么是Vuex?

vuex是一个专门为vue.js设计的集中式状态管理架构。状态?我把它理解为在data中的属性需要共享给其他vue组件使用的部分,就叫做状态。简单的说就是data中需要共用的属性。

引入Vuex(前提是已经用Vue脚手架工具构建好项目)

1、利用npm包管理工具,进行安装 vuex。在控制命令行中输入下边的命令就可以了。

npm install vuex --save

要注意的是这里一定要加上 ?save,因为你这个包我们在生产环境中是要使用的。

2、新建一个store文件夹(这个不是必须的),并在文件夹下新建store.js文件,文件中引入我们的vue和vuex。 

import Vue from 'vue';
 import Vuex from 'vuex';

3、使用我们vuex,引入之后用Vue.use进行引用。

import Vue from 'vue';
 import Vuex from 'vuex';

通过这三步的操作,vuex就算引用成功了,接下来我们就可以尽情的玩耍了。

4、在main.js 中引入新建的vuex文件

import storeConfig from './vuex/store'

5、再然后 , 在实例化 Vue对象时加入 store 对象 :

new Vue({
  el: '#app',
  router,
  store,//使用store
  template: '<App/>',
  components: { App }
 })

初出茅庐 来个Demo

1、现在我们store.js文件里增加一个常量对象。store.js文件就是我们在引入vuex时的那个文件。

const state = {
  count:1
 }

2、用export default 封装代码,让外部可以引用。

export default new Vuex.Store({
  state
 });

3、新建一个vue的模板,位置在components文件夹下,名字叫count.vue。在模板中我们引入我们刚建的store.js文件,并在模板中用{{$store.state.count}}输出count 的值。

<template>
  <div>
   <h2>{{msg}}</h2>
   <hr/>
   <h3>{{$store.state.count}}</h3>
  </div>
 </template>
 <script>
  import store from '@/vuex/store'
  export default{
   data(){
    return{
     msg:'Hello Vuex',

    }
   },
   store
  }
 </script>

4、在store.js文件中加入两个改变state的方法。

const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

这里的mutations是固定的写法,意思是改变的,所以你先不用着急,只知道我们要改变state的数值的方法,必须写在mutations里就可以了。

5、在count.vue模板中加入两个按钮,并调用mutations中的方法。

<div>
  <button @click="$store.commit('add')">+</button>
  <button @click="$store.commit('reduce')">-</button>
 </div>

这样进行预览就可以实现对vuex中的count进行加减了。

state访问状态对象

const state ,这个就是我们说的访问状态对象,它就是我们SPA(单页应用程序)中的共享值。

学习状态对象赋值给内部对象,也就是把stroe.js中的值,赋值给我们模板里data中的值。有三种赋值方式

一、 通过computed的计算属性直接赋值

computed属性可以在输出前,对data中的值进行改变,我们就利用这种特性把store.js中的state值赋值给我们模板中的data值。

computed:{
  count(){
   return this.$store.state.count;
  }
 }

这里需要注意的是return this.$store.state.count这一句,一定要写this,要不你会找不到$store的。这种写法很好理解,但是写起来是比较麻烦的,那我们来看看第二种写法。

二、通过mapState的对象来赋值

我们首先要用import引入mapState。  

import {mapState} from 'vuex';

然后还在computed计算属性里写如下代码:

computed:mapState({
   count:state=>state.count //理解为传入state对象,修改state.count属性
  })

这里我们使用ES6的箭头函数来给count赋值。

三、通过mapState的数组来赋值

computed:mapState(["count"])

这个算是最简单的写法了,在实际项目开发当中也经常这样使用。

Mutations修改状态($store.commit( ))

Vuex提供了commit方法来修改状态,我们粘贴出Demo示例代码内容,简单回顾一下,我们在button上的修改方法。

<button @click="$store.commit('add')">+</button>
 <button @click="$store.commit('reduce')">-</button>

store.js文件:

const mutations={
  add(state){
   state.count+=1;
  },
  reduce(state){
   state.count-=1;
  }
 }

传值:这只是一个最简单的修改状态的操作,在实际项目中我们常常需要在修改状态时传值。比如上边的例子,是我们每次只加1,而现在我们要通过所传的值进行相加。其实我们只需要在Mutations里再加上一个参数,并在commit的时候传递就就可以了。我们来看具体代码:

现在store.js文件里给add方法加上一个参数n。

const mutations={
  add(state,n){
   state.count+=n;
  },
  reduce(state){
   state.count-=1;
  }
 }

在Count.vue里修改按钮的commit( )方法传递的参数,我们传递10,意思就是每次加10.

<p>
  <button @click="$store.commit('add',10)">+</button>
  <button @click="$store.commit('reduce')">-</button>
 </p>

模板获取Mutations方法

实际开发中我们也不喜欢看到$store.commit( )这样的方法出现,我们希望跟调用模板里的方法一样调用。
 例如:@click=”reduce” 就和没引用vuex插件一样。要达到这种写法,只需要简单的两部就可以了:

1、在模板count.vue里用import 引入我们的mapMutations:   

import { mapState,mapMutations } from 'vuex';

2、在模板的<\script>标签里添加methods属性,并加入mapMutations

methods:mapMutations([
   'add','reduce'
 ]),

通过上边两部,我们已经可以在模板中直接使用我们的reduce或者add方法了,就像下面这样。

<button @click="reduce">-</button>

getters计算过滤操作

getters从表面是获得的意思,可以把他看作在获取数据之前进行的一种再编辑,相当于对数据的一个过滤和加工。你可以把它看作store.js的计算属性。

getters基本用法:

比如我们现在要对store.js文件中的count进行一个计算属性的操作,就是在它输出前,给它加上100.我们首先要在store.js里用const声明我们的getters属性。

const getters = {
  count:function(state){
   return state.count +=100;
  }
 }

写好了gettters之后,我们还需要在Vuex.Store()里引入,由于之前我们已经引入了state和mutations,所以引入里有三个引入属性。代码如下,

export default new Vuex.Store({
  state,mutations,getters
 })

在store.js里的配置算是完成了,我们需要到模板页对computed进行配置。在vue 的构造器里边只能有一个computed属性,如果你写多个,只有最后一个computed属性可用,所以要对上节课写的computed属性进行一个改造。改造时我们使用ES6中的展开运算符”…”。

computed:{
  ...mapState(["count"]),
  count(){
   return this.$store.getters.count;
  }
 },

需要注意的是,你写了这个配置后,在每次count 的值发生变化的时候,都会进行加100的操作。

用mapGetters简化模板写法

我们都知道state和mutations都有map的引用方法把我们模板中的编码进行简化,我们的getters也是有的,我们来看一下代码。

首先用import引入我们的mapGetters

import { mapState,mapMutations,mapGetters } from 'vuex';

在computed属性中加入mapGetters

...mapGetters(["count"])

actions异步修改状态

actions和之前讲的Mutations功能基本一样,不同点是,actions是异步的改变state状态,而Mutations是同步改变状态。至于什么是异步什么是同步这里我就不做太多解释了,如果你不懂自己去百度查一下吧。

在store.js中声明actions

actions是可以调用Mutations里的方法的,我们还是继续在上节课的代码基础上进行学习,在actions里调用add和reduce两个方法。

const actions ={
  addAction(context){
   context.commit('add',10)
  },
  reduceAction({commit}){
   commit('reduce')
  }
 }

在actions里写了两个方法addAction和reduceAction,在方法体里,我们都用commit调用了Mutations里边的方法。细心的小伙伴会发现这两个方法传递的参数也不一样。

•ontext:上下文对象,这里你可以理解称store本身。
•{commit}:直接把commit对象传递过来,可以让方法体逻辑和代码更清晰明了。

模板中的使用

我们需要在count.vue模板中编写代码,让actions生效。我们先复制两个以前有的按钮,并改成我们的actions里的方法名,分别是:addAction和reduceAction。

<p>
   <button @click="addAction">+</button>
   <button @click="reduceAction">-</button>
  </p>

改造一下我们的methods方法,首先还是用扩展运算符把mapMutations和mapActions加入。

methods:{
    ...mapMutations([ 
      'add','reduce'
    ]),
    ...mapActions(['addAction','reduceAction'])
  },

你还要记得用import把我们的mapActions引入才可以使用。

增加异步检验

我们现在看的效果和我们用Mutations作的一模一样,肯定有的小伙伴会好奇,那actions有什么用,我们为了演示actions的异步功能,我们增加一个计时器(setTimeOut)延迟执行。在addAction里使用setTimeOut进行延迟执行。

setTimeOut(()=>{context.commit(reduce)},3000);
  console.log('我比reduce提前执行');

我们可以看到在控制台先打印出了‘我比reduce提前执行'这句话。

module模块组

随着项目的复杂性增加,我们共享的状态越来越多,这时候我们就需要把我们状态的各种操作进行一个分组,分组后再进行按组编写。那今天我们就学习一下module:状态管理器的模块组操作。

声明模块组:

在vuex/store.js中声明模块组,我们还是用我们的const常量的方法声明模块组。代码如下:

const moduleA={
    state,mutations,getters,actions
  }

声明好后,我们需要修改原来 Vuex.Stroe里的值:

export default new Vuex.Store({
    modules:{a:moduleA}
  })

在模板中使用

现在我们要在模板中使用count状态,要用插值的形式写入。 

<h3>{{$store.state.a.count}}</h3>

如果想用简单的方法引入,还是要在我们的计算属性中rutrun我们的状态。写法如下:

computed:{
    count(){
      return this.$store.state.a.count;
    }
  },

总结

以上所述是小编给大家介绍的全站最详细的Vuex教程,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript 数组的 uniq 方法
Jan 23 Javascript
用js实现的自定义的对话框的实现代码
Mar 21 Javascript
浅析js中2个等号与3个等号的区别
Aug 06 Javascript
使用jQuery异步加载 JavaScript脚本解决方案
Apr 20 Javascript
node.js中的fs.symlinkSync方法使用说明
Dec 15 Javascript
使用VS开发 Node.js指南
Jan 06 Javascript
jQuery焦点图轮播特效代码分享(3款)
Sep 05 Javascript
AngularJS的Filter的示例详解
Mar 07 Javascript
Vue 项目部署到服务器的问题解决方法
Dec 05 Javascript
jQuery实现右侧抽屉式在线客服功能
Dec 25 jQuery
React Native 真机断点调试+跨域资源加载出错问题的解决方法
Jan 18 Javascript
vue集成openlayers加载geojson并实现点击弹窗教程
Sep 24 Javascript
vue的常用组件操作方法应用分析
Apr 13 #Javascript
简单的vuex 的使用案例笔记
Apr 13 #Javascript
angular实现页面打印局部功能的思考与方法
Apr 13 #Javascript
vuex中的 mapState,mapGetters,mapActions,mapMutations 的使用
Apr 13 #Javascript
js捆绑TypeScript声明文件的方法教程
Apr 13 #Javascript
详解vuex中mapState,mapGetters,mapMutations,mapActions的作用
Apr 13 #Javascript
使用sessionStorage解决vuex在页面刷新后数据被清除的问题
Apr 13 #Javascript
You might like
PHP 和 XML: 使用expat函数(三)
2006/10/09 PHP
WINDOWS下php5.2.4+mysql6.0+apache2.2.4+ZendOptimizer-3.3.0配置
2008/03/28 PHP
php面向对象全攻略 (十) final static const关键字的使用
2009/09/30 PHP
PHP实现的pdo连接数据库并插入数据功能简单示例
2019/03/30 PHP
javascript 内存回收机制理解
2011/01/17 Javascript
Javascript中 关于prototype属性实现继承的原理图
2013/04/16 Javascript
将数字转换成大写的人民币表达式的js函数
2014/09/21 Javascript
javascript事件模型实例分析
2015/01/30 Javascript
【经典源码收藏】jQuery实用代码片段(筛选,搜索,样式,清除默认值,多选等)
2016/06/07 Javascript
jQuery特殊符号转义的实现
2016/11/30 Javascript
js实现适合新闻类图片的轮播效果
2017/02/05 Javascript
浅析javaScript中的浅拷贝和深拷贝
2017/02/15 Javascript
ES6新特性之类(Class)和继承(Extends)相关概念与用法分析
2017/05/24 Javascript
jQuery添加新内容的四个常用方法分析【append,prepend,after,before】
2019/03/19 jQuery
Vue中的组件及路由使用实例代码详解
2019/05/22 Javascript
vant实现购物车功能
2020/06/29 Javascript
解决Vue 移动端点击出现300毫秒延迟的问题
2020/07/21 Javascript
解决vue项目,npm run build后,报路径错的问题
2020/08/13 Javascript
[00:21]DOTA2亚洲邀请赛 Logo演绎
2015/02/07 DOTA
Python高效编程技巧
2013/01/07 Python
Python外星人入侵游戏编程完整版
2020/03/30 Python
Python中使用haystack实现django全文检索搜索引擎功能
2017/08/26 Python
Python 获得13位unix时间戳的方法
2017/10/20 Python
python 执行文件时额外参数获取的实例
2018/12/18 Python
python使用Plotly绘图工具绘制水平条形图
2020/03/25 Python
python+Selenium自动化测试——输入,点击操作
2020/03/06 Python
美国网上购买眼镜:Eyeconic
2017/07/29 全球购物
英国和世界各地鲜花速递专家:Arena Flowers
2018/02/10 全球购物
德国苹果商店:MacTrade
2020/05/18 全球购物
北京某公司的.net笔试题
2014/03/20 面试题
土地转让协议书
2014/04/15 职场文书
报案材料怎么写
2015/05/25 职场文书
结婚典礼主持词
2015/06/29 职场文书
解决Nginx 配置 proxy_pass 后 返回404问题
2021/03/31 Servers
python自动统计zabbix系统监控覆盖率的示例代码
2021/04/03 Python
Java面试题冲刺第十八天--Spring框架3
2021/08/07 面试题