Vuex入门到上手教程


Posted in Javascript onJune 20, 2018

一、前言

当我们的应用遇到多个组件共享状态时,会需要多个组件依赖于同一状态。传参的方法对于多层嵌套的组件将会非常繁琐,并且对于兄弟组件间的状态传递无能为力。在搭建下面页面时,你可能会对 vue 组件之间的通信感到崩溃 ,特别是非父子组件之间通信。此时就应该使用vuex,轻松可以搞定组件间通信问题。

Vuex入门到上手教程 

二、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。这里的关键在于集中式存储管理。 这意味着本来需要共享状态的更新是需要组件之间通讯的,而现在有了vuex,就组件就都和store通讯了 。

三、什么时候使用Vuex

虽然 Vuex 可以帮助我们管理共享状态,但也附带了更多的概念和框架。这需要对短期和长期效益进行权衡。 如果您的应用够简单,您最好不要使用 Vuex,因为使用 Vuex 可能是繁琐冗余的。一个简单的global event bus就足够您所需了。但是, 如果您需要构建一个中大型单页应用,您很可能会考虑如何更好地在组件外部管理状态,Vuex 将会成为自然而然的选择。

四、Vuex安装(限定开发环境为 vue-cli)

首先要安装vue-cli脚手架,对于大陆用户,建议将npm的注册表源设置为国内的镜像(淘宝镜像),可以大幅提升安装速度。

npm config set registry https://[registry.npm.taobao.org](http://registry.npm.taobao.org/)
npm config get registry//配置后可通过下面方式来验证是否成功
npm install -g cnpm --registry=[https://registry](https://registry/).npm.taobao.org
//cnpm安装脚手架
cnpm install -g vue-cli
vue init webpack my-vue
cd my-vue
cnpm install
cnpm run dev

脚手架安装好后,再安装vuex

cnpm install vuex --save

 五、如何使用Vuex

1.如何通过Vuex来实现如下效果?

Vuex入门到上手教程 

①创建一个store.js文件

import Vue from "vue"
import Vuex from "vuex"
Vue.use(Vuex)
const store = new Vuex.Store({
 state: { //这里的state必须是JSON,是一个对象
 count: 1 //这是初始值
 },
 mutations: {//突变,罗列所有可能改变state的方法
 add(state) {
  state.count++; //直接改变了state中的值,而并不是返回了一个新的state
 },
 reduce(state){
  state.count--;
 }
 }
});
export default store;//用export default 封装代码,让外部可以引用

②在main.js文件中引入store.js文件

import store from "./vuex/store"
new Vue({
 router,
 store,
 el: '#app',
 render: h => h(App)
})

③新建一个模板count.vue

<template>
 <div>
  <h2>{{msg}}</h2><hr/>
  <h2>{{$store.state.count}}-{{count}}</h2>//这两种写法都可以
  <button @click="addNumber">+</button>
  <button @click="reduceNumber">-</button>
 </div>
</template>
<script>
import {mapState} from 'vuex'
export default {
 data() {
 return {
  msg: "Hello Vuex"
 };
 },
 methods: {
 addNumber() {
  return this.$store.commit("add");
 },
 reduceNumber() {
  return this.$store.commit("reduce");
 }
 },
 computed: mapState(['count'])// 映射 this.count 到 this.$store.state.count
         mapState 函数可以接受一个对象,也可以接收一个数组
};
</script>

由于 store 中的状态是响应式的,当 Vue 组件从 store 中读取状态的时候,若 store 中的状态发生变化,那么相应的组件也会相应地得到高效更新。 在组件中调用 store 中的状态简单到仅需要在计算属性中返回即可。改变store 中的状态的唯一途径就是显式地提交 (commit) mutations。

这样,我们就可以实现自增1或是自减1,那假如我们想要点击一次实现自增2,这该如何实现,也就是如何向Mutations传值?

2.如何在Mutations里传递参数

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

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

然后在Count.vue里修改按钮的commit( )方法传递的参数

addNumber() {
  return this.$store.commit("add",2);
 },
 reduceNumber() {
  return this.$store.commit("reduce");
 }

3.getters如何实现计算过滤操作

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

例如:要对store.js文件中的count进行操作,在它输出前,给它加上100。

首先要在store.js里Vuex.Store()里引入getters

getters:{
  count:state=>state.count+=100
 }

然后在Count.vue中对computed进行配置,在vue 的构造器里边只能有一个computed属性,如果你写多个,只有最后一个computed属性可用,所以要用展开运算符”…”对上节写的computed属性进行一个改造。

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

需要注意的是,此时如果点击'+',就会增加102,如果点击'-',就会增加99,最后的结果是mutations和getters共同作用的。

4.actions如何实现异步修改状态

actions和上面的Mutations功能基本一样,不同点是, actions是异步的改变state状态,而Mutations是同步改变状态 。

①在store.js中声明actions

actions: {
 addAction(context) {
  context.commit('add', 2);//一开始执行add,并传递参数2
  setTimeout(() => {
  context.commit('reduce')
  }, 2000);//两秒后会执行reduce
  console.log('我比reduce提前执行');
 },
 reduceAction({
  commit
 }) {
  commit('reduce')
 }
 }

actions是可以调用Mutations里的方法的,调用add和reduce两个方法。在addAction里使用setTimeOut进行延迟执行。在actions里写了两个方法addAction和reduceAction,两个方法传递的参数也不一样。

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

②模板中的使用

<p>
 <button @click="addNumber">+</button>
 <button @click="reduceNumber">-</button>
</p>
<p>  
 <button @click="addAction">+</button>//新增
 <button @click="reduceAction">-</button>//新增
</p>
import { mapState, mapGetters, mapActions } from "vuex";
methods:{
 ...mapMutations([ 
  'add','reduce'
 ]),
 ...mapActions(['addAction','reduceAction'])
}

最后得到如下效果:点击addAction按钮事件时,先累加2,两秒后再减去1,而addNumber事件则不能实现异步效果。

Vuex入门到上手教程

ps:如果想访问源代码,请猛戳 git地址 。如果觉得对您有用,请给本文的github加个star,万分感谢

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

Javascript 相关文章推荐
文本框根据输入内容自适应高度的代码
Oct 24 Javascript
JavaScript获取网页表单提交方式的方法
Apr 02 Javascript
js中setTimeout()与clearTimeout()用法实例浅析
May 12 Javascript
JavaScript中解析JSON数据的三种方法
Jul 03 Javascript
JS实现仿Windows7风格的网页右键菜单效果代码
Sep 11 Javascript
jQuery模拟实现的select点击选择效果【附demo源码下载】
Nov 09 Javascript
js如何判断是否在iframe中及防止网页被别站用iframe嵌套
Jan 11 Javascript
利用Javascript裁剪图片并存储的简单实现
Mar 13 Javascript
vue2.0 自定义组件的方法(vue组件的封装)
Jun 05 Javascript
VUE2.0+ElementUI2.0表格el-table循环动态列渲染的写法详解
Nov 30 Javascript
jQuery事件委托代码实践详解
Jun 21 jQuery
Node.JS获取GET,POST数据之queryString模块使用方法详解
Feb 06 Javascript
JavaScript 中的 this 工作原理
Jun 20 #Javascript
如何用webpack4带你实现一个vue的打包的项目
Jun 20 #Javascript
JavaScript对象拷贝与Object.assign用法实例分析
Jun 20 #Javascript
vue打包的时候自动将px转成rem的操作方法
Jun 20 #Javascript
详解基于vue的服务端渲染框架NUXT
Jun 20 #Javascript
JS中call和apply函数用法实例分析
Jun 20 #Javascript
微信小程序模拟cookie的实现
Jun 20 #Javascript
You might like
用C/C++扩展你的PHP 为你的php增加功能
2012/09/06 PHP
php语言流程控制中的主动与被动
2012/11/05 PHP
php实现将base64格式图片保存在指定目录的方法
2016/10/13 PHP
Nginx下ThinkPHP5的配置方法详解
2017/08/01 PHP
Extjs407 getValue()和getRawValue()区别介绍
2013/05/21 Javascript
快速使用Bootstrap搭建传送带
2016/05/06 Javascript
浅谈js中的延迟执行和定时执行
2016/05/31 Javascript
Bootstrap轮播插件使用代码
2016/10/11 Javascript
js仿淘宝评价评分功能
2017/02/28 Javascript
微信小程序登录态控制深入分析
2017/04/12 Javascript
node使用Koa2搭建web项目的方法
2017/10/17 Javascript
vue2 router 动态传参,多个参数的实例
2017/11/10 Javascript
使用 vue-i18n 切换中英文效果
2018/05/23 Javascript
js+html5实现手机九宫格密码解锁功能
2018/07/30 Javascript
AJAX在JQuery中的应用详解
2019/01/30 jQuery
JavaScript中的一些实用小技巧总结
2019/04/07 Javascript
简单了解JS打开url的方法
2020/02/21 Javascript
python字符串编码识别模块chardet简单应用
2015/06/15 Python
Python的dict字典结构操作方法学习笔记
2016/05/07 Python
在python中以相同顺序shuffle两个list的方法
2018/12/13 Python
用python3 返回鼠标位置的实现方法(带界面)
2019/07/05 Python
pandas DataFrame 警告(SettingWithCopyWarning)的解决
2019/07/23 Python
如何在python中写hive脚本
2019/11/08 Python
Python3将jpg转为pdf文件的方法示例
2019/12/13 Python
Python计算IV值的示例讲解
2020/02/28 Python
HTML5 实现一个访问本地文件的实例
2012/12/13 HTML / CSS
使用HTML5 Canvas绘制圆角矩形及相关的一些应用举例
2016/03/22 HTML / CSS
中专毕业生自荐信
2013/11/16 职场文书
十佳青年个人事迹材料
2014/01/28 职场文书
中秋节超市促销方案
2014/01/30 职场文书
公司任命书模板
2014/06/06 职场文书
学校捐款活动总结
2015/05/09 职场文书
读书笔记格式
2015/07/02 职场文书
优秀教师主要事迹材料
2015/11/04 职场文书
进行数据处理的6个 Python 代码块分享
2022/04/06 Python
win10此电脑打不开怎么办 win10双击此电脑无响应的解决办法
2022/07/23 数码科技