什么是vuex（vuex详解）

官方解释：Vuex 是专为 vue.js 应用程序开发的状态管理模式。

一、Vuex 是做什么呢?

什么是状态管理?

简单地讲：可以把多个组件都需要的变量全部存储到一个对象里面，然后这个对象放在顶层的 vue 实例中，让其他组件可以使用。这样多个组件就可以共享这个对象中的所有属性。

有些同学想着，这么简单我们自己在vue顶层定义一个对象不就可以实现共享了?我们发现虽然数据可以获取到，但是如果在某个组件内，数据改变了，那我们如何修改数据，让此数据在其他组件内保持最新呢?

我们的vuex就是为了提供一个在多个组件间共享状态的插件，而且能够实现实时响应。

二、Vuex 使用

vuex 是管理组件之间通信的一个插件，所以使用之前必须安装。

2.1、安装

1）使用 script 方式引入

2）使用包管理

1. npminstallvuex--save//yarnaddvuex

注意：vuex 必须依赖 vue 使用

2.2、搭建 store 实例

创建一个 store 文件夹，新建 index.js

1. importVuefrom"vue";
2. importVuexfrom"vuex";
4. Vue.use(Vuex);//使用vuex
6. exportdefaultnewVuex.Store({
7. state:{},
8. mutations:{},
9. getters:{},
10. actions:{},
11. modules:{}
12. })

在 main.js 处，挂载 store

1. importstorefrom'./store'
3. newVue({
4. router,
5. render:h=>h(App)
6. })
8. //相当于
9. //Vue.prototype.$store=store

2.3、使用状态

1. //store中定义状态
2. state:{
3. statue:'在线'
4. }
6. //在组件内使用
7. 组件内数据：{{$store.state.status}}
8. //在js中使用
9. mounted(){
10. console.log(this.$store.state.status)
11. }

三、Vuex 的五大核心

3.1、state

state 存放 vuex 的基本数据，用来存储变量的。

单一状态树

Vuex 使用单一状态树，即用一个对象就包含了全部的状态数据。state 作为构造器选项，定义了所有我们需要的基本状态参数。

在组件中引用 state 数据方式：

1）通过 vue 的 computed 获取 vuex 的 state

1. exportdefaultnewVuex.Store({
2. state:{
3. online:true
4. }
5. })
8. computed:{
9. status(){
10. returnthis.$store.state.online
11. }
12. }

store 中的数据发生改变时，都会重新求取计算属性，并更新相关 DOM。

2）如果需要使用多个参数时，都使用 computed 计算属性，就会使代码变的有些冗余和复杂，此时我们就可以借助 mapState 辅助函数。

1. //state中数据比较多，引用到一个组件内
2. exportdefaultnewVuex.Store({
3. state:{
4. online:true,
5. per:[
6. {name:'qq',age:18}
7. ],
8. role:'管理员'
9. }
10. })
12. //组件内
13. import{mapState}from'vuex'
15. exportdefault{
16. name:'App',
17. computed:mapState({
18. online:state=>state.online,
19. per:'per',//'per'就相当于state.per
20. role:'role'//'role'就相当于state.role
21. })
22. }

vuex 使用单一状态树来管理应用层级的全部状态，单一状态树能够让我们最直接的方式找到某个状态的片段，而且之后的维护和调试过程，也可以非常方便管理和维护。

3.2、getters

从 store 中获取一些 state 变异后的状态。

使用的时候一般有两种方式：

1）返回的结果只依赖于 state 中的数据

1. exportdefaultnewVuex.Store({
2. state:{
3. count:2,
4. },
5. getters:{
6. //返回count的2倍数据
7. countDouble(state){
8. returnstate.count*2
9. }
10. }
11. })
13. //组件中引用
14. 获取countDouble：{{$store.getters.countDouble}}
15. //运行结果
16. 获取countDouble：4

此处，$store.getters.countDouble 的使用与上边的 $store.state.count 是一样的。

2）getters 中返回的变异结果，依赖于某个 getters 中属性返回结果

1. exportdefaultnewVuex.Store({
2. state:{
3. count:2,
4. },
5. getters:{
6. //返回count的2倍数据
7. countDouble(state){
8. returnstate.count*2
9. }
10. //返回countDouble的2倍数据
11. countDoubleT(state,getters){
12. returngetters.countDouble*2
13. }
14. }
15. })
17. //组件中引用
18. 获取countDouble：{{$store.getters.countDoubleT}}
19. //运行结果
20. 获取countDouble：8

3.3、mutations

vuex 的store 状态的更新唯一方式：提交 Mutation。

Mutations 主要包括两部分：

字符串的事件类型

一个回调函数，该回调函数的第一个参数就是 state。

1）mutation 中的方法通过 commit 调用，不传参数使用：

1. exportdefaultnewVuex.Store({
2. state:{
3. count:2,
4. },
5. mutations:{
6. incrs(state){
7. //count加1
8. state.count++
9. }
10. }
11. })
13. //组件调用

如果您对该产品感兴趣，请填写办理（客服微信：xiaoxiongyidong）

您的姓名 *

身份证号码 *

手机号码 *

选择地区 *

详细地址 *

留言备注 *