本文主要记录使用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. SDUT OJ 多项式求和

    多项式求和 Time Limit: 1000 ms Memory Limit: 65536 KiB Submit Statistic Discuss Problem Description 多项式描述 ...

  2. java的几种对象(PO,VO,DAO,BO,POJO,DTO)解释

    一.PO:persistant object 持久对象,可以看成是与数据库中的表相映射的java对象.最简单的PO就是对应数据库中某个表中的一条记录,多个记录可以用PO的集合.PO中应该不包含任何对数 ...

  3. 1.1、Logistics Regression模型

    1.线性可分VS线性不可分 对于一个分类问题,通常可以分为线性可分与线性不可分两种 .如果一个分类问题可以使用线性判别函数正确的分类,则称该问题为线性可分.如图所示为线性可分,否则为线性不可分: 下图 ...

  4. JAVA GET 和 POST 的区别

    GET 和 POST 的区别 GET请注意,查询字符串(名称/值对)是在 GET 请求的 URL 中发送的:/test/demo_form.asp?name1=value1&name2=val ...

  5. 数据库,asp总结思维导图图片

  6. React组件Components的两种表示方式

    函数式的表示: function Welcome(props) { return <h1>Hello, {props.name}</h1>; } Class式的表示: clas ...

  7. P4294 [WC2008]游览计划

    传送门 斯坦纳树 给一个联通图,求 $k$ 个关键点联通的最小生成树权值 设 $f[o][i]$ 表示当前关键点选择状态为 $o$ ,以点 $i$ 为根的树的最小权值 初始 $f[1<<( ...

  8. leetcode 493 Reverse Pairs

    题意:给定一个数组nums,求若 i<j and nums[i] > 2*nums[j] 的逆序对. Note: 数组的长度不会超过50,000 不愧是hard模式的题目,虽然已经知道可以 ...

  9. BZOJ - 1941 最远估价

    题意:求给出的所有点的最远点减最近点的最小差值 KD树的最远估价和最近估价略微不同,直接找最远垂线,反正xjb改一下就过了 #include<bits/stdc++.h> #define ...

  10. Codeforces - 71E 状压DP

    参考官方题解 #include<bits/stdc++.h> #define rep(i,j,k) for(register int i=j;i<=k;i++) #define rr ...