vuex详解

青旅半醒 2022-12-19 13:11 136阅读 0赞

### 文章目录 ###

*  一、什么是vuex?
 *  二、为什么要用vuex?
 *  三、使用步骤
 *   *   *  1.安装
         *  2.使用vuex
         *  3.创建store
 *  四、vuex五大核心
 *   *   *  1.State
         *  2.Getters
         *  3.Mutations
         *  4. Action
         *  5. Modules
 *  五、vuex辅助函数
 *   *   *  1.什么是辅助函数？
         *  2. 如何使用
 *  六、vuex运行机制
 *  七、 注意

--------------------

# 一、什么是vuex? #

我们先来看看对Vuex比较专业的介绍：

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简而言之，Vuex就是全局状态管理工具

--------------------

# 二、为什么要用vuex? #

Vuex状态管理跟使用传统全局变量的不同之处：

1. Vuex的状态存储是响应式的：就是当你的组件使用到了这个Vuex的状态，一旦它改变了，所有关联的组件都会自动更新相对应的数据，这样开发者省事很多。  
 2.不能直接修改Vuex的状态：如果是个全局对象变量，要修改很容易，但是在Vuex中不能这样做，想修改就得使用Vuex提供的唯一途径：显示地提交（commint）mutations来实现修改（没了解过这里没关系，下一节前端君会有介绍）。这样做的好处就是方便我们跟踪每一个状态的变化，在开发过程中调试的时候，非常实用。

示例：pandas 是基于NumPy 的一种工具，该工具是为了解决数据分析任务而创建的。

# 三、使用步骤 #

### 1.安装 ###

代码如下（示例）：

npm install vuex --save

### 2.使用vuex ###

代码如下（示例）：

import Vue from 'vue'
    import Vuex from 'vuex'
    Vue.use(Vuex)

### 3.创建store ###

要使用Vuex，我们要创建一个实例 store，我们称之为仓库，利用这个仓库 store 来对我们的状态进行管理。

//创建一个 store
     const store = new Vuex.Store({ });

--------------------

# 四、vuex五大核心 #

### 1.State ###

假设我们有一个全局状态count的值为5。那么，我们就可以将其定义为 state 对象中的key和value，作为全局状态供我们使用。如下：

//创建一个 store
     const store = new Vuex.Store({ 
        //state存储应用层的状态
        state:{ 
            count:5  //总数：5
        }
     });

### 2.Getters ###

可以认为，getters 是store的计算属性，类似于computed,对state里的数据进行一些过滤，改造等等

假设我们要在state.count的基础上派生出一个新的状态newCount出来，就适合使用我们的 getters，getters 接受 state 作为其第一个参数

const store = new Vuex.Store({ 
       //state存储应用层的状态
       state:{ 
          count:5  //总数：5
       },
       getters:{ 
          newCount:state => state.count * 3
       }
     });

### 3.Mutations ###

Vuex给我们提供修改仓库 store中的状态的唯一办法就是通过提交mutation ，且必须是同步函数

我们在 mutations中定义了一个叫increment的函数，函数体就是我们要进行更改的地方

会接受 state作为第一个参数，第二个是自定义传参

const store = new Vuex.Store({ 
        //state存储应用层的状态
        state:{ 
            count:5  //总数：5
        },
        mutations:{ 
            increment(state，value){ 
                state.count += value;
            }
        }
     });

我们在提交commit时候，字符串参数increment,就是对应在 mutations中的increment。  
一般通过方法或钩子触发，例如：

methods: { 
       getVal(event) { 
         //获取当前的按键的值
         let value = event.target.dataset.value;
         //通过commit提交一个名为increment的mutation
         this.$store.commit("increment", value);
       }
     }

在组件中获取\{ \{count\}\}方式：

export default { 
      computed: { 
          count(){ 
              return this.$store.state.count;
          }
      }
    };

### 4. Action ###

用于提交 mutation，而不是直接变更状态，可以包含任意异步操作。  
只有通过action=>mutations=>states,这个流程进行操作,具体步骤如下：

export default new Vuex.Store({ 
      //存放数据
      state: { 
        obj: { }, 
      },
      //4.通过commit mutations中的方法来处理
      mutations: { 
        getParam (state,Object) { 
    	   //5.修改state中的数据
           state.obj= Object
        }
      },
      //2.接受dispatch传递过来的方法和参数
      actions: { 
        getParamSync (context,Object) { 
    	    //处理异步操作
            setTimeout(()=>{ 
    	        //3.通过commit提交一个名为getParam的mutation
    	        //action 函数接受一个与 store 实例具有相同方法和属性的 context 对象，因此你可以调用 context.commit 提交一个 mutation
                context.commit('getParam',Object)
            },3000)
        }
      }
    })

组件中调用

methods: { 
       getVal() { 
    	  let name= 'xia';
    	  let age= '26';
    	  let sex= 'man';
    	  //1.通过dispatch将方法getParamSync和多个参数{name,age,sex}传递给actions
    	  this.$store.dispatch('getParamSync',{ name,age,sex})
       }
     }

### 5. Modules ###

随着项目的复杂度增大，为了方便管理vuex，一般会将其按功能分割成不同的模块(Module)，方便日后管理。每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块

import Vue from 'vue'
    import Vuex from 'vuex'
    import state from './state'
    import mutations from './mutations'
    import actions from './actions'
    import * as getters from './getters'
    
    import moduleA from './module/moduleA' // 模块A
    import moduleB from './module/moduleB' // 模块B
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({ 
        actions,
        getters,
        state,
        mutations,
        modules: { 
            moduleA,
            moduleB
        }
    })

moduleA.js / moduleB.js 文件

// 每个模块拥有自己的 state、mutation、action、getter、甚至是嵌套子模块
    export default { 
        state: { 
            text: 'moduleA'
        },
        getters: { },
        mutations: { },
        actions: { }
    }

组件中调用

<template>
    	<div class="demo">
    		<h1>{
       {getText1}}</h1>
    		<h1>{
       {getText2}}</h1>
    	</div>
    </template>

computed: { 
        getText1(){ 
        	return this.$store.state.moduleA.text;
        },
        //或
    	...mapState({ 
    		getText2: state => state.moduleB.text;
    	})
    }

# 五、vuex辅助函数 #

### 1.什么是辅助函数？ ###

通过辅助函数mapState、mapActions、mapMutations，把vuex.store中的属性映射到vue实例身上，这样在vue实例中就能访问vuex.store中的属性了，对于操作vuex.store就很方便了。

state辅助函数为mapState，actions辅助函数为mapActions，mutations辅助函数为mapMutations。（Vuex实例身上有mapState、mapActions、mapMutations属性，属性值都是函数）

### 2. 如何使用 ###

import {  mapState, mapGetters, mapActions, mapMutations } from "vuex";
    export default { 
      computed: { 
        ...mapGetters({ 
          "": "vuex仓库定义的方法",
        }),
        ...mapState({ }),
      },
      methods: { 
        ...mapMutations({ }),
        ...mapActions({ }),
      },
    };
    </script>

# 六、vuex运行机制 #

View components -> actions(dispatch方式) -> mutations(commit方式) -> state -> View components
    //而 getters则可以理解为computed，作为state的计算属性

# 七、 注意 #

1. 数据流都是单向的
    2. 组件能够调用action
    3. action用来派发mutation
    4. 只有mutation可以改变状态
    5. store是响应式的，无论state什么时候更新，组件都将同步更新