一篇文章理解vuex原理

我会带着你远行 2021-09-02 06:15 578阅读 0赞

### vuex作用: ###

组件的通信成本很高，所以为了简化组件间通信（共享数据），vue提供了vuex插件。是基于flux思想实现的。

**flux**

是由react团队提供的数据通信架构思想。解决网状通信的问题。实现了数据单向流动。

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70][]

由四部分组成

**action 消息对象**

**dispatcher 用来捕获消息对象，并处理数据**

**store 存储数据**

**view 组件视图**

**flux通信流程**

一个组件或者用户发布一个action消息

消息被dispatcher捕获，并根据消息类型，处理数据

并将新的数据传递给store去存储，

store中的数据发生改变，将数据传递给另一个组件。

那vuex是如何实现的呢？

vuex就是基于flux思想实现的，实现了单一数据源，数据单向流动等特征。![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1][]

### **组成部分** ###

简化了flux，是由三个部分

action 消息模块

state 存储数据

view 组件视图

### **通信流程** ###

一个组件发布消息，

消息被action模块捕获，

并根据消息类型，处理数据

action将新的数据传递给state去存储。

state中的数据发生了改变，将新的数据传递给另一个组件。

### **action分类** ###

在vuex中，将action分成两类

一类是同步消息：mutation

为了可测试

一类是异步消息：action

为了异步操作

## **store组成** ##

下图中，绿色虚线部分就是vuex，在代码中用store表示。

由于vuex实现了单一数据源的特征，所以整个应用程序中，只能有且只有一个store对象

在store中，由五部分组成：

state 存储组件间共享的数据

getters 存储组件间共享的计算属性数据

**getters与state的关系与data与computed关系是一样的。**

mutations 订阅同步消息的模块（相当于观察者模式中的on方法）

通过commit方法来提交同步消息（相当于观察者模式中的trigger方法）

actions 订阅异步消息的模块（相当于观察者模式中的on方法）

通过dispatch方法来提交异步消息（相当于观察者模式中的trigger方法）

modules 用来切割模块的。

注意：如果没有异步消息，可以直接发布同步消息

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2][]

如果你还不懂   那我就直接上案例吧

下面的案例就是通过vuex 实现的组件共享的案例

使用vuex分成五步

第一步 安装vuex

只有在模块化开发中，需要安装（seajs除外）

Vue.use(Vuex)

use方法是专门用来安装插件的。

第二步 实例化store，通过Vue.Store类创建

参数是对象，可以传递各个组成部分：stae，mutatins ......

第三步 注册store，

为vue实例化对象安装store，一旦安装之后，所有的组件都可以获取store对象

所以就可以通过store，获取state中的数据。

注册就是说让所有的组件能够获取$store对象

通过store属性注册。

第四步 一个组件使用store中的数据

第五步 一个组件发布消息

<body>
    	<div id="app">
                    
    		<button @click="sendReduceNumMessage">减少2</button>
    		
    		<add-num></add-num>
    		<show-num></show-num>
    	</div>
    <script type="text/javascript" src="dist/02.js"></script>
    
    
    // 引入vue
    import Vue from 'vue';
    // 引入Vuex  使用解构 引入store
    import Vuex, { Store } from 'vuex';
    
    类型下面这种(我说的我感觉应该特别细了)
    // import Vuex from 'vuex';
    // import { Store } from 'vuex';
    
    
    // 1 安装   
    Vue.use(Vuex);
    
    // 2 实例化 store
    let store = new Store({
    
    	// state存储组件间共享的数据
    	state: {
    		num: 0
    	},
    
    	// 计算属性数据  类似computed
    	getters: {
    		doubleNum(state, getters) {
    			// console.log(arguments)
    			// num的二倍
    			return state.num * 2;
    		}		
    	},
    
    	// 同步消息
    	mutations: {
    		// 增加数字方法
    		addNum(state, num) {
    			// console.log(this, arguments)
    			// 更新数据 
    			state.num += +num;
    		},
    		// 减少数字方法
    		reduceNum(state, num) {
    			// console.log(this, arguments)
    			// 用num更新state中的数据
    			state.num -= num;
    		},
    		// 清空数字方法
    		clearNum(state, num) {
    			// 清空数字
    			state.num = num;
    		}
    	},
    	// 异步消息  异步消息要通过同步消息获取  
    	actions: {
    		// 清空数字方法
    		clear(store, num) {
    		
    			// 定义 异步操作
    			setTimeout(() => {
    				//  发布同步消息
    				store.commit('clearNum', num)
    			}, 2000)
    		}
    	}
    })
    
    // 增加数字组件
    let AddNum = Vue.extend({
    	template: `
    		<div>
                     //获取store中的同步消息用$store.commit
    		<button @click="$store.commit('addNum', 5)">增加5</button>
    		
                    //获取store中的异步消息通过$store.dispatch
    		<button @click="$store.dispatch('clear', 0)">2秒之后清空</button>
    
    		</div>
    	`,
    	// 组件创建完成
    	created() {
    		console.log('addNum', this)
    	}
    })
    // 显示数字组件
    let ShowNum = Vue.extend({  
    
    	// 4 一个组件使用数据  这里子组件通过$store获取store中的数据 这里获取了store中的的属性值 以及！！！ getters计算属性数据中的.doubleNum方法
    
    	template: `
    		<h1>num:{
       {$store.state.num}} -- {
       {$store.getters.doubleNum}}</h1>
    	`,
    
    	// 组件创建完成
    	created() {
    		console.log('showNum', this)
    	}
    })
    
    // 实例化
    new Vue({
    
    	// 3 注册store
    	store,
    
    	// 视图
    	el: '#app',
    
    	// 注册组件
    	components: { AddNum, ShowNum },
    
    	// 数据
    	data: {},
    
    	// 方法  父组件中同样是通过$store.commit 获取同步消息
    	methods: {
    		// 发布减少数字消息
    		sendReduceNumMessage() {
    			// 发布同步消息
    
    			// 多个数据，放在数组或者对象中
    			// this.$store.commit('reduceNum', [2, 5, 100, true])
    
    			this.$store.commit('reduceNum', 2)
    		}
    	},
    	// 组件创建完成
    	created() {
    		console.log('app', this)
    	}
    })

**补充一下 modules**

我们通过modules来切割模块。

解决问题：如果应用程序很大，会有很多的共享数据，放在同一个state中，会有命名冲突问题。为了解决这类问题，我们可以通过modules切割store，来分类存储state数据。

**切割出来的store，本质也是store**，因此也可以传递store的各个模块：state，getters，mutations，actions，modules

**store中的数据是作为state来存储的，因此切割store的本质，就是切割state**，所以只有**state需要添加命名空间，其它的数据可以正常使用。**

modules属性值是对象

key 表示命名空间

value 是子store对象，可以定义store的各个部分。

此时就有了全局store与局部store对象了，它们内部可以定义同名的数据

data 使用的时候，要携带命名空间

mutations,action 正常使用，

局部的消息修改局部的数据

全局的消息修改全局的数据

但是发布同名的消息，局部与全局的都会执行

getters 不允许同名

<body>
    	<div id="app">
                    
    		<button @click="sendReduceNumMessage">减少2</button>
    		
    		<add-num></add-num>
    		<show-num></show-num>
    	</div>
    <script type="text/javascript" src="dist/02.js"></script>
    
    
    // 引入vue
    import Vue from 'vue';
    // 引入Vuex  使用解构 引入store
    import Vuex, { Store } from 'vuex';
    
    类型下面这种(我说的我感觉应该特别细了)
    // import Vuex from 'vuex';
    // import { Store } from 'vuex';
    
    
    // 1 安装   
    Vue.use(Vuex);
    
    // 2 实例化 store
    let store = new Store({
      	// 全局数据
    	state: {
    		num: 10,
    		
    	},
    	// 计算属性数据
    	getters: {
    		dealColor(state) {
    			return state.color.toUpperCase();
    		},
    		// 同名计算属性数据，不允许定义
    		// doubleNum() {}
    	},
    
    	// 全局消息
    	mutations: {
    		addNum(state, num) {
    			state.num += num;
    		}
    	},
    
    
       
        //这里来切割模块 定义局部的store
       modules: {
    	// 命名空间是str
         str: {
    	// state存储组件间共享的数据
    	state: {
    		num: 0
    	},
    
    
    	// 计算属性数据  类似computed
    	getters: {
    		doubleNum(state, getters) {
    			// console.log(arguments)
    			// num的二倍
    			return state.num * 2;
    		}		
    	},
    
    	// 同步消息
    	mutations: {
    		// 增加数字方法
    		addNum(state, num) {
    			// console.log(this, arguments)
    			// 更新数据 
    			state.num += +num;
    		},
    		// 减少数字方法
    		reduceNum(state, num) {
    			// console.log(this, arguments)
    			// 用num更新state中的数据
    			state.num -= num;
    		},
    		// 清空数字方法
    		clearNum(state, num) {
    			// 清空数字
    			state.num = num;
    		}
    	},
    	// 异步消息  异步消息要通过同步消息获取  
    	actions: {
    		// 清空数字方法
    		clear(store, num) {
    		
    			// 定义 异步操作
    			setTimeout(() => {
    				//  发布同步消息
    				store.commit('clearNum', num)
    			}, 2000)
    		}
    	}
         ｝
      ｝
    })
    
    // 增加数字组件
    let AddNum = Vue.extend({
    	template: `
    		<div>
                     //获取store中的同步消息用$store.commit
    		<button @click="$store.commit('addNum', 5)">增加5</button>
    		
                    //获取store中的异步消息通过$store.dispatch
    		<button @click="$store.dispatch('clear', 0)">2秒之后清空</button>
    
    		</div>
    	`,
    	// 组件创建完成
    	created() {
    		console.log('addNum', this)
    	}
    })
    // 显示数字组件
    let ShowNum = Vue.extend({  
    
    	// 4 一个组件使用数据  这里子组件通过$store获取store中的数据 这里获取了store中的的属性值 以及！！！ getters计算属性数据中的.doubleNum方法
    
    	template: `
    
                        
                     		
          <h1>num:{
       {$store.state.num}}--{
       {$store.getters.dealColor}}</h1>		
    
                     //这里使用的局部store
                <h1>num:{
       {$store.state.str.num}} --{
       {$store.getters.doubleNum}}</h1>
    	`,
    
    	// 组件创建完成
    	created() {
    		console.log('showNum', this)
    	}
    })
    
    // 实例化
    new Vue({
    
    	// 3 注册store
    	store,
    
    	// 视图
    	el: '#app',
    
    	// 注册组件
    	components: { AddNum, ShowNum },
    
    	// 数据
    	data: {},
    
    	// 方法  父组件中同样是通过$store.commit 获取同步消息
    	methods: {
    		// 发布减少数字消息
    		sendReduceNumMessage() {
    			// 发布同步消息
    
    			// 多个数据，放在数组或者对象中
    			// this.$store.commit('reduceNum', [2, 5, 100, true])
    
    			this.$store.commit('reduceNum', 2)
    		}
    	},
    	// 组件创建完成
    	created() {
    		console.log('app', this)
    	}
    })

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70]: /images/20210813/061e760f7e404a58aad9a0e294d6783f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 1]: /images/20210813/8434ac7e35894e09bb3804de6081e706.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQxMzI4MjQ3_size_16_color_FFFFFF_t_70 2]: /images/20210813/cf5966d7cdfa4f6781602cb668f58b94.png