![05dbb02ae77cdda76512a845d9c6dceb.png](https://i-blog.csdnimg.cn/blog_migrate/ace112fad14c96d745067ea4391e29a7.jpeg)
作者:我的名字豌豆
转发链接:https://segmentfault.com/a/1190000023415359
一.什么是Vuex?
Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension,提供了诸如零配置的 time-travel 调试、状态快照导入导出等高级调试功能。采用了全局单例模式,将组件的共享状态抽离出来管理,使得组件树中每一个位置都可以获取共享的状态或者触发行为。 那么什么是状态呢?我把状态理解为在没有使用vuex时,在当前组件中data内需要共用的数据为状态。 vuex使得状态或行为成为了共享的状态,所共享的状态或行为可以在各个组件中都可以访问到,省去了子父或子子之间传递变量,提高了开发效率。
二.不使用vuex时与使用vuex时的差别
当我们不使用vuex时,对于组件之间传递信息会较为麻烦。
不使用vuex时
父子之间传递信息:
App.vue文件中:
Good.vue文件中:
name:{{good.name}} number: {{good.number}} {{index}}
兄弟之间传递信息:
首先先创建一个js文件作为两兄弟之间传输的纽扣,这里起名为msg.js
//创建并暴露vueimport Vue from 'vue';export default new Vue
兄弟组件Goods:
点击
兄弟组件Fruits:
{{text}}
在App组件中的代码:
![5f28365e4934e8829e3af194535c8344.png](https://i-blog.csdnimg.cn/blog_migrate/fcc082f811b3267bee1e2f7292a7efb5.jpeg)
点击按钮:
![9d0bd0ad27e5c3487aee9506260d4138.png](https://i-blog.csdnimg.cn/blog_migrate/72f02f45f97ff31dbd060ea101e3c46f.jpeg)
![969a76826f6d670445b1686a422062c4.png](https://i-blog.csdnimg.cn/blog_migrate/915b66b5e278ecef8a2557eaab2002a5.jpeg)
上述为兄弟组件之间的传值,是不是感觉到有点麻烦呢?初学vue组件传值时,我也觉得这种方法很麻烦,vuex很好的解决了这个问题,愉快的编写代码。
使用vuex共享状态数据
store.js中的配置:
import Vue from 'vue'; //引入vueimport Vuex from 'vuex'; //引入vuexVue.use(Vuex) //声明使用Vuexconst state = { count:1, totalName:'total'}const store = new Vuex.Store({ state }) export default store
App.vue中的配置:
--------------------------
Good.vue中的配置
我是Goods中的组件
我们共同的数字:{{this.count}}
我们共同的名字是 {{this.totalName}}
Fruits.vue
我是Fruits中的组件
我们共同的数字:{{this.count}}
我们共同的名字是 {{this.totalName}}
上述为使用vuex进行简单的引用状态数据值的例子,将数据放到state中进行管理,引入辅助函数和将state中的数据引入组件,在组件中进行调用,这种方法是不是比不使用vuex更容易了点呢?但是这才只是个非常浅非常浅的开始。下面进入正文!!!
三.vuex的使用
vuex的安装
打开终端,输入命令行npm install vuex --save进行下载vuex
![c6e87875c8ea315e3788705afbbd94cd.png](https://i-blog.csdnimg.cn/blog_migrate/48c581fa7ef957d8e0509e22e93a5ddb.jpeg)
vuex的核心概念:
- State:共享状态,相当于组件中data中的数据,只不过此时变成了全局变量。
- Getter:基于state的派生状态,相当于组件中的computed中的属性。
- Mutation:更改vuex中store共享状态中的方法,通过提交mutation来去修改状态,进行同步操作数据,通常用于action获取异步数据,获取通过commit提交数据给mutation,在mutation同步操作state中的数据。
- action:支持异步操作,可用于异步获取请求中的数据,并将获取的数据同步commit提交给mutation,实现ajax异步请求数据,mutation将其数据同步到state中。
- module:为了方便后期对于项目的管理,对于store中的state,mutation,action,getter进行分子模块化管理。
下面我们的介绍将会在Module规范中进行介绍。
Module的模块化管理
对于子模块管理我们需要创建核心化管理对象store起名为index.js将其他state,getter,mutations,actions。引入到该store模块中,并将其暴露Store对象,下面为代码部分。
module结构
![41e0dba3d5c70badad05287344ea892b.png](https://i-blog.csdnimg.cn/blog_migrate/096c4f243be610bd33a5ed8c6e573cfb.jpeg)
vuex应用核心管理仓库store
下面为store的代码,这里的js我们取名为index.js,通过将state,mutations,actions,getters引入到store中,并暴露出store对象。
/* vuex最核心的管理对象store*/import Vue from 'vue';import Vuex from 'vuex';import state from './state';import mutations from './mutations';import actions from './actions';import getters from './getters';//声明使用插件Vue.use(Vuex)//new 一个Vuex的对象,将state,mutation,action,getters配置到vuex的store中,方便管理数据export default new Vuex.Store({ state, mutations, actions, getters,})
state状态管理数据
我们通常将需要进行管理的共享数据,放入state中,使其形似为全局变量,对于需要的组件进行引入该state状态数据。下面为state中的代码举例:
/* 状态对象*/export default{ userInfo: {}, //用户信息 count:1}
mutation-types
使用常量来代替mutations事件类型是一件很常见的模式,将这些常量放进一个单独的文件,可以使你的代码合作者对于你的代码一目了然,增强了代码的可阅读性。下面上代码,由于只是例子,所以此时只引入了一个方法。
/* 包含n个mutation的type名称常量*/export const RECEIVE_USER_INFO = 'receive_user_info' //接收用户信息
actions的异步操作
actions与其mutations类似,但其可以进行异步操作,且将异步操作获取的数据提交给mutations,使得mutations更改state中的状态数据,这里常常用于获取ajax请求中的数据(因为是异步),并将其获取的数据提交给mutations得到state数据状态的更新。这里的发送ajax发送请求的代码,这里就不进行演示了,大家能够了解,此时action中的数据是通过发送ajax请求来获取的就行。此时也能体现出actions中可以进行异步操作。下面上代码:
/* 通过mutation间接更新state的多个方法的对象*/import { RECEIVE_USER_INFO, //引入在mutation-types定义的常量} from './mutation-types';import { reqUserInfo,} from '../api'; //这里引入发送ajax请求的方法export default{ // 异步获取用户信息 async getUserInfo({commit}){ //引入发送请求数据的方法,异步等待获取数据,并将其数据赋值给result const result = await reqUserInfo() //当获取数据成功时,result.code会为0,失败则为1,这里用于判断是否获取状态数据成功 if (result.code === 0) { const userInfo = result.data //获取请求中的数据 //通过commit将其方法,和请求后获取的用户信息传递给mutation commit(RECEIVE_USER_INFO,{userInfo}) } }}
需要注意的是:在组件中应用下列方式来去调用vuex组件中的方法:
this.$store.dispatch('getUserInfo')
mutations同步提交数据
mutations用于更改state中的状态逻辑的,且未同步更改state中的状态数据。需要知道的是在vuex中只能通过mutation来去修改state对象,可以通过获取actions获取到的数据去修改state,也可以在mutations模块中直接定义方法来去更改状态数据。通过mutations和上面的actions模块大家也可以看出commit是用于mutation模块中的。在组件中调用其mutation模块的代码为:
this.$store.commit('increment')
下面上mutation模块中的代码:
/* 直接更新state的多个方法的对象*/import { RECEIVE_USER_INFO,} from './mutation-types';export default{//方法中的第一个默认形参为state,也可以传入额外的参数,既mutation的载荷(playload) [RECEIVE_USER_INFO](state,{userInfo}){ state.userInfo = userInfo }, //不通过actions直接在mutation模块中更改state状态数据 increment(state){ state.count = 3 }}
Getters对state进行加工
Getters相当于computed计算属性,用于加工处理state状态数据,有其两个默认参数,第一个默认参数为state,第二个默认参数为getters。在组件中调用该方法的代码片段为:
this.$store.getters.totalCount()
下面为Getters中的代码片段:
/* 包含多个基于state的getter计算属性的对象 */export default{ plusCount(state){ return state.count + 1 }, //获取state中状态数据对象,和获取getters模块中plusCount数据 totalCount(state,getters){ return getters.plusCount + state.count } }
那么对于以上的store我们就简单介绍完了,相信大家看完后对于vuex会有一定的理解。那么这个时候我们要想,是不是使用this.$store.state或this.$store.getters.xxx感到麻烦呢?下面我们介绍另一种引入state和getters的方式
辅助函数mapState和mapGetters
对于上述的引用state和getters的方法是不是感到麻烦呢?使用mapState你将会感受到便利。
//首先我们需要先将辅助函数引入import { mapGetters,mapState } from 'vuex'export default { computed: { // 使用对象展开运算符将 getter 混入 computed 对象中 ...mapGetters(['plusCount','totalCount',]) // 使用对象展开运算符将 state 混入 computed 对象中 ...mapState(['userInfo','count']) }}
以上就是对于vuex的详解啦,希望能够帮助到大家对于vuex的理解,感兴趣的话就点个赞呗!
作者:我的名字豌豆
转发链接:https://segmentfault.com/a/1190000023415359