本文主要记录使用vuex的使用场景、重要组成部分和学习心得。

1、说在前面

学习vue有两周的时间了,目前已经对vue的基础使用比较熟悉了。但是一直对vuex的使用耿耿于怀,这么说是因为总是不太理解,还好经过实践和深入阅读官网后现在总算有了一定的掌握,这里做一下学习笔记和使用心得。

2、什么是vuex

vuex是vue的状态管理模式,它集中管理所有组件的共享状态,并且有自己的规则,比如怎么修改状态的值,怎么获取状态的值,是以一种可预测的方式来监听状态的改变。

3、为什么要使用vuex

我们知道,组件的通信(单向数据流)有两种:

  • 1、父->子通信,通过props
  • 2、子->父通信,通过触发$emit的方法

    那么,兄弟组件的通信呢?(当然简单的也可以通过子->父->子的方法传递,但是还是比较麻烦的),那么不相关的组件之间的通信呢?这就是vuex存在的主要意义。用官网上的话就是解决:
  • 1、多个视图依赖同一个状态
  • 2、来自不同视图的行为变更同一个状态

4、vuex的组成

State

state中定义共享的状态值

//state.js
export default state = {
count: 0
}

获取state的值,需要放在计算属性中,保证每次state能够响应式的获取

computed:{
count(){
return this.$stores.state.count //获取值
}
}

这种获取方式是比较繁琐的,因此vuex给我们提供的对应的语法糖 mapState,便于我们简洁性的获取值

import { mapState } from 'vuex'

export default{
computed:{
...mapState(['count']) //这样我们在组件就可以通过this.count获取对应的值了
}
}

Getter

state的派生状态值,可以理解成是store的计算属性,它一般是一个方法,方法接受一个参数state

//getter.js
export default {
getCount: state => state.count + 1
}

它的辅助函数是mapGetter,一般也放在computed里

import { mapGetters } from 'vuex'
export default {
computed: {
// 使用对象展开运算符将 getter 混入 computed 对象中
...mapGetters(['getCount'])
}
}

Mutation

vuex规定更改state的值唯一方法是提交 mutation,原因是为了能够明确的追踪状态的变化,它接受2个参数(state,newVal),第二个参数可以是字符串也可以是对象

//mutations.js
export default {
setCount(state,newVal){
state.count = newVal
}
}

必须通过commit的方法触发调用它

this.$store.commit('setCount',20) //此时你把state中的count的值变成了20

它的辅助函数是mapMutations,它一般放在methods中

import { mapMutations } from 'vuex'
export default {
methods: {
...mapMutations(['setCount'])
}
}

在 Vuex 中,mutation 都是同步事务,不可写入异步操作

Action

Action 类似于 mutation,它主要用于:

  • 批量的同步操作
  • 异步操作

    它接受一个store 实例具有相同方法和属性的 context 对象,注意它提交的是 mutation,而不是直接变更状态
//actions.js
export default {
increment(context){
context.commit('setCount')
}
}

在实践中可以通过参数解构的方法简化代码

    increment({commit}){
commit('setCount')
}

在组件中通过分发dispatch的方法来触发action

this.$store.dispatch('increment')

这样做的目的是为了可以在action的内部执行异步操作(比如通过接口请求后才更改state的值)

    increment({commit}){
setTimeout(()=>{
commit('setCount')
},1000)
}

也可以同步批量更改state中的值

    increment({commit}){
commit('mutation1')
commit('mutation2')
commit('mutation3')
}

它的辅助函数是mapActions,一般放在methods中

import { mapActions } from 'vuex'

export default {
methods: {
...mapActions(['increment']) //将 this.increment() 映射为 this.$store.dispatch('increment')
}
}

action的返回接收,可以返回一个Promise

export default{
actionA ({ commit }) {
return new Promise((resolve, reject) => {
setTimeout(() => {
commit('someMutation')
resolve()
}, 1000)
})
}
}

数据接受后处理

this.$store.dispatch('actionA').then(() => {
// ...
})

5、vuex的定义

我们一般会在src目录下建立一个名为store的文件夹专门放vuex的文件,目录里存放

  • state.js:所有需要管理的状态
  • getters.js:所有需要更派生的状态
  • mutations.js :所有需要更改状态的方法
  • actions.js: 所有需要异步或批量同步更改状态的方法
  • index.js: 主入口文件

    代码
import Vue from 'vue'
import VueX from 'vuex'
import States from './state'
import Getters from './getters'
import Mutations from './mutations'
import Actions from './actions' Vue.use(Vuex)
export default nex Vuex.Store({
State,
Getters,
Mutations,
Actions
})

然后在根目录下的main.js中全局引入

import store from './store'

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

6、总结

总的来说,当把所有的应用梳理一遍后vuex也没有那么的高深莫测,一切源于实践吧!实践比直接阅读或看文档更加的印象深刻。当然,还有一些应用官网上说的很明确,这里不在重述。比如:

vuex深入浅出的更多相关文章

  1. 5分钟让你掌握Vuex,深入浅出

    5分钟让你掌握Vuex,深入浅出 一.什么是Vuex? 概念:Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式.它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预 ...

  2. 深入浅出的webpack4构建工具--webpack4+vue+vuex+mock模拟后台数据(十九)

    mock的官网文档 mock官网 关于mockjs的优点,官网这样描述它:1)可以前后端分离.2)增加单元测试的真实性(通过随机数据,模拟各种场景).3)开发无侵入(不需要修改既有代码,就可以拦截 A ...

  3. 深入浅出的webpack4构建工具--webpack4+vue+route+vuex项目构建(十七)

    阅读目录 一:vue传值方式有哪些? 二:理解使用Vuex 三:webpack4+vue+route+vuex 项目架构 回到顶部 一:vue传值方式有哪些? 在vue项目开发过程中,经常会使用组件来 ...

  4. 一篇文章带你深入浅出Vuex

    在写Vuex之前,我们先用一个简单的例子来实现一个小demo 大家都知道Vue的父传子用在很多场景,比如像这样: 父组件: <template> <div id="app& ...

  5. 【深入浅出jQuery】源码浅析--整体架构

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  6. 关于Vue.js 2.0 的 Vuex 2.0,你需要更新的知识库

    应用结构 实际上,Vuex 在怎么组织你的代码结构上面没有任何限制,相反,它强制规定了一系列高级的原则: 应用级的状态集中放在 store 中. 改变状态的唯一方式是提交mutations,这是个同步 ...

  7. 【深入浅出jQuery】源码浅析2--奇技淫巧

    最近一直在研读 jQuery 源码,初看源码一头雾水毫无头绪,真正静下心来细看写的真是精妙,让你感叹代码之美. 其结构明晰,高内聚.低耦合,兼具优秀的性能与便利的扩展性,在浏览器的兼容性(功能缺陷.渐 ...

  8. vuex复习方案

    这次复习vuex,发现官方vuex2.0的文档写得太简略了,有些看不懂了.然后看了看1.0的文档,感觉很不错.那以后需要复习的话,还是先看1.0的文档吧.

  9. 深入浅出Struts2+Spring+Hibernate框架

    一.深入浅出Struts2 什么是Struts2? struts2是一种基于MVC的轻量级的WEB应用框架.有了这个框架我们就可以在这个框架的基础上做起,这样就大大的提高了我们的开发效率和质量,为公司 ...

随机推荐

  1. 老男孩Day10作业:主机管理程序

    一.作业需求: 1, 运行程序列出主机组或者主机列表 2,选择指定主机或主机组 3,选择主机或主机组传送文件(上传/下载) 4,充分使用多线程或多进程 5,不同主机的用户名,密码,端口可以不同 6,可 ...

  2. 设置placeholder的样式

    :-moz-placeholder { /* Mozilla Firefox 4 to 18 */ color: #f00; } ::-moz-placeholder { /* Mozilla Fir ...

  3. 解压与压缩(把dataset转为string、、 )

    /// <summary> /// 压缩 解压 /// </summary> public class ZipHelper { #region 压缩解缩 /// <sum ...

  4. svn学习笔记(二)

    一.TortoiseSVN日常使用 1.1 浏览仓库 Repo-browser : 浏览仓库中资源信息 1.2 导入导出 Export :导出项目 ,和checkout区别 (checkout检出后文 ...

  5. python之IO目录处理

    IO目录处理 在使用io常用函数之前,必须要在py文件头部import os.os是(Operation system)的缩写,意思就是系统操作. 1. 创建删除目录 #!/usr/bin/pytho ...

  6. 洛谷 P3239 [HNOI2015]亚瑟王(期望dp)

    题面 luogu 题解 一道复杂的期望\(dp\) 思路来源:__stdcall 容易想到,只要把每张牌打出的概率算出来就可以求出\(ans\) 设\(fp[i]\)表示把第\(i\)张牌打出来的概率 ...

  7. [USACO12FEB]牛的IDCow IDs 一题多解(求二进制中有k个1 ,第n大的数)

    题目: FJ给他的奶牛用二进制进行编号,每个编号恰好包含K 个"1" (1 <= K <= 10),且必须是1开头.FJ按升序编号,第一个编号是由K个"1&q ...

  8. 加、减、乘、除 高精度 string

    #include<stdio.h> #include<string> #include<string.h> #include<iostream> usi ...

  9. day_01 python基础 基本数据类型 if条件

    1. python简介 解释型,弱类型,高级开发语言2. 第一个python程序编写   1. 标点符号(英文)   2. 编码格式(utf-8)3.变量   把程序运行产生的中间值储存起来,方便后面 ...

  10. pg存储过程和sql语句块

    展E宝项目使用的是postgresql数据库,批量发送红包需求,需要采用存储过程来初始化红包记录数据. 创建存储过程语句有固定的架子,如下 CREATE OR REPLACE FUNCTION pub ...