Vue中的Vuex

ゝ一纸荒年。 2021-08-19 20:07 459阅读 0赞

**目录**

一，vuex介绍

二，vuex计数器案例

三，vuex的getter

四，vuex的辅助函数

五，使用vuex时表单的处理

六，vuex中分模块开发

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

# 一，**vuex****介绍** #

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

官方文档：[点击进入][Link 1]

vuex是什么(总结)：

1.  Vuex是一个基于vue应用的全局状态管理器；
2.  可以将应用中不同组件的状态抽取并统一管理；
3.  它可以在vue中全局使用；
4.  在构建大型应用时，可方便的在组件外部管理状态/数据；
5.  它需要遵守一定的规则，如下三点：

*  在state中存放数据；
 *  在action中定义方法；
 *  在mutations中改变状态；

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70][]

# 二，**vuex****计数器案例** #

如果使用单向数据流开发一个计数器功能非常简单，只需在组件中定义数据、事件即可；

但是，如果这个计数器的数据在N多组件中都需要访问，那么组件之间就要进行复杂的数据传递，后期维护会很麻烦；

所以这里使用vuex将组件间共同的数据和方法抽取，并统一管理；

这样在不同的组件中就可以使用vuex方便的操作了；

创建一个项目：vue create projectname

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1][]

建好项目后，在Home.vue和store.js中修改代码，如下：

Home.vue

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png">
    		<div>
    			<button @click="subCount()"> - </button>     
    			<span>{
       {count}}</span>     
    			<button @click="addCount()"> + </button>
    		</div>
    		
      </div>
    </template>
    
    <script>
    export default {
    	
    	computed:{
    		count(){
    			return this.$store.state.count;
    		}
    	},
    	
    	
    	methods:{
    		addCount(){
    			this.$store.dispatch('addCount')
    		},
    		subCount(){
    			this.$store.dispatch('subCount')
    		}
    	}
    }
    
    </script>

store.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
    		count:5
      },
      mutations: {
    	addCount(state){
    		state.count++;
    	},
    	subCount(state){
    		state.count--;
    	}
      },
      actions: {
    		addCount(context){
    			console.log(context);
    			if(context.state.count<10){
    				context.commit('addCount');
    			}
    		},
    		subCount(context){
    			if(context.state.count>0){
    				context.commit('subCount');
    			}
    		}
      }
    })

![20190922104039786.gif][]

例2：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3][]![20191110231753302.png][]![20191110231758386.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5][]

# 三，**vuex****的****getter** #

使用vuex时，我们在获取数据时还想做些额外的逻辑处理，可以使用到vuex中的getter；

getter顾名思义就是提供get方法，也可以理解成vue中的计算属性(computed)

使用getter可以针对vuex中state的状态（数据）进行逻辑处理并返回；

getter可以直接返回数据，也可以返回方法；

App.vue

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png"><br />
        vuex中的数组：<span>{
       {this.$store.state.arr}}</span><br />
        vuex中的数组的长度：<span>{
       {arrLength}}</span><br />
        count加数组长度：<span>{
       {countAddArrLength}}</span><br />
        输出index：<input type="text" v-model="index"/><br />
        获取指定索引的数据：<span>{
       {getValueByIndex(index)}}</span>
      </div>
    </template>
    
    <script>
    
    export default {
    	data(){
    		return {
    			index : 0
    		}
    	},
    	computed : {
    		arrLength(){
    			return this.$store.getters.arrLength;
    		},
    		countAddArrLength(){
    			return this.$store.getters.countAddArrLength
    		},
    		getValueByIndex(){
    			return function(index){
    				return this.$store.getters.getValueByIndex(index);
    			}
    		}
    	}
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

store.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
    		arr : [0,11, 22, 33, 44, 55, 66],
    		count : 10
      },
      getters : {
      	arrLength(state){
      		return state.arr.length;
      	},
      	countAddArrLength(state, getters){
      		return state.count + getters.arrLength;
      	},
      	getValueByIndex(state){
      		return function(index){
      			if(index >= 0 && index < state.arr.length){
      				return state.arr[index];
      			}
      		}
      	}
      },
      mutations: {
    
      },
      actions: {
    
      }
    })

![20190922115205802.gif][]

例2：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8][]

getters可以直接返回数据，也可以返回方法；如下

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 10][]

![20191110232024688.png][]

# 四，**vuex的****辅助函数** #

为了简化代码，vuex在state、getters、actions、mutations中都提供了相应的辅助函数；

它们分别对应：

*  state：mapState
 *  getters：mapGetters
 *  actions：mapActions
 *  mutations：mapMutations

APP.vue

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png"><br />
      	arr : <span>{
       {arr}}</span><br />
        count : <span>{
       {count}}</span><br />
        user : <span>{
       {myUser.username}}</span><br />
        arrLength : <span>{
       {arrLength}}</span>
        <hr />
        localNum : <span>{
       {localNum}}</span>
        <hr />
        <div>
        	<button @click="getArr">getArr</button><br />
        	<button @click="getCount">getCount</button><br />
        	<button @click="getUser">getUser</button><br />
        	<button @click="localMethod">localMethod</button><br />
        	<button @click="addCount">addCount</button>
        </div>
      </div>
    </template>
    
    <script>
    
    import { mapState, mapGetters, mapActions, mapMutations } from 'vuex'
    
    export default {
    /*	computed : {
    		arr(){
    			return this.$store.state.arr;
    		}
    	}*/
    	
    /*	computed : mapState([
    		'arr', 'count', 'user'
    	])*/
    	
    /*	computed : mapState({
    		arr : state => state.arr,
    		count : state => state.count,
    		user : state => state.user
    	})*/
    	
    	computed : {
    		localNum(){
    			return this.num + 100;
    		},
    		...mapState([
    			'arr', 'count'
    		]),
    		...mapState({
    			myUser : state => state.user
    		}),
    		...mapGetters([
    			'arrLength'
    		])
    	},
    	data(){
    		return {
    			num : 10
    		}
    	},
    /*	methods : {
    		getArr(){
    			this.$store.dispatch('getArr');
    		}
    	}*/
    	
    /*	methods : mapActions([
    		'getArr', 'getCount', 'getUser'
    	])*/
    	
    /*	methods : mapActions({
    		getArr : 'getArr',
    		getCount : 'getCount',
    		getUser : 'getUser',
    	})*/
    	
    	methods : {
    		localMethod(){
    			console.log("localMethod");
    		},
    		...mapActions([
    			'getArr', 'getCount', 'getUser'
    		]),
    		...mapMutations([
    			'addCount'
    		])
    	}
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

store.js

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
    		arr : [11, 22, 33],
    		count : 10,
    		user : {
    			username : 'lijiang',
    			password : '123abc'
    		}
      },
      getters:{
      	arrLength(state){
      		return state.arr.length;
      	}
      },
      mutations: {
    		addCount(state){
    			state.count++;
    		}
      },
      actions: {
    		getArr(context){
    			console.log(context.state.arr);
    		},
    		getCount(context){
    			console.log(context.state.count);
    		},
    		getUser(context){
    			console.log(context.state.user);
    		},
      }
    })

![2019092412315839.gif][]

例2：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 11][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 12][]![20191110232110565.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 13][]

# 五，**使用****vuex****时表单的处理** #

使用vuex时数据的更改是在mutation中执行的，但如果表单中v-model绑定了vuex中state的状态，这种情况显然是破坏了vuex的规则；

我们可以使用以下方法解决这个问题：

1.  使用带有setter的计算属性，在setter中进行commit；
2.  使用事件的形式，在回调中进行commit

App.vue

<template>
      <div id="app">
        <img alt="Vue logo" src="./assets/logo.png"><br />
        localMsg : <input type="text" v-model="localMsg" />   <span>{
       {localMsg}}</span><br />
        <hr /><br />
        vuex MsgA : <input type="text" v-model="msgA" />   <span>{
       {msgA}}</span><br />
        <hr /><br />
        vuex MsgB : <input type="text" :value="msgB" @input="updateMsgB"/>   <span>{
       {msgB}}</span><br />
      </div>
    </template>
    
    <script>
    import HelloWorld from './components/HelloWorld.vue'
    
    export default {
    	data(){
    		return {
    			localMsg : 'Joey'
    		}
    	},
    	computed : {
    		msgA : {
    			get(){
    				return this.$store.state.msgA;
    			},
    			set(value){
    				//this.$store.state.msgA = value;
    				this.$store.commit('updateMsgA', value);
    			}
    		},
    		msgB(){
    			return this.$store.state.msgB;
    		}
    	},
    	methods : {
    		updateMsgB(e){
    			this.$store.commit('updateMsgB', e.target.value);
    		}
    	}
    }
    </script>
    
    <style>
    #app {
      font-family: 'Avenir', Helvetica, Arial, sans-serif;
      -webkit-font-smoothing: antialiased;
      -moz-osx-font-smoothing: grayscale;
      text-align: center;
      color: #2c3e50;
      margin-top: 60px;
    }
    </style>

store.js

注意，这里使用了**严格模式**：在严格模式下，无论何时发生了状态变更且不是由mutation函数引起的，将会抛出错误。这能保证所有的状态变更都能被调试工具跟踪到。

开启严格模式，仅需在创建store的时候传入：**strict:true**

import Vue from 'vue'
    import Vuex from 'vuex'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
    	strict: true,	//开启严格模式
      state: {
    		msgA : "siki",
    		msgB : 'lain'
      },
      mutations: {
    		updateMsgA(state, data){
    			state.msgA = data;
    		},
    		updateMsgB(state, data){
    			state.msgB = data;
    		}
      },
      actions: {
    
      }
    })

![20190924125517345.gif][]

# 六，**vuex****中分模块开发** #

在使用vuex开发时，应用的状态都集中到一个store对象里会非常臃肿，变的难以维护；

为了解决此问题，vuex允许我们将store分成不同的模块，每个模块中都有自己的state、getter、action、mutation；

官方说明：[点击前往][Link 2]

![2019092922523824.png][]

store.js

import Vue from 'vue'
    import Vuex from 'vuex'
    import home from './home'
    import about from './about'
    
    Vue.use(Vuex)
    
    export default new Vuex.Store({
      state: {
      	name : 'root'
      },
      mutations: {
    
      },
      actions: {
    
      },
      modules : {
      	home,
      	about
      }
    })

home.js

export default {
    	namespaced : true,
      state: {
      	name : 'Home',
      	count : 100
      },
      mutations: {
      	addCount(state){
      		state.count++;
      	},
      	subCount(state){
      		state.count--;
      	}
      },
      actions: {
      	addCount(context){
      		context.commit('addCount');
      	},
      	subCount(context){
      		console.log(context.rootState.name);
      		context.commit('subCount');
      	}
      }
    }

home.vue

<template>
      <div class="home">
        <img alt="Vue logo" src="../assets/logo.png"><br />
        root : <span>{
       {rootName}}</span><br />
        <h1>我是：{
       {name}}</h1><br />
        <h2>count : {
       {count}}</h2>
        <button @click="addCount"> + </button>
        <button @click="subCount"> - </button>
      </div>
    </template>
    
    <script>
    export default {
    	computed : {
    		rootName(){
    			return this.$store.state.name;
    		},
    		name(){
    			return this.$store.state.home.name;
    		},
    		count(){
    			return this.$store.state.home.count;
    		}
    	},
    	methods : {
    		addCount(){
    			return this.$store.dispatch('home/addCount');
    		},
    		subCount(){
    			return this.$store.dispatch('home/subCount');
    		}
    	}
    }
    </script>

about.js

export default {
    	namespaced : true,
      state: {
      	name : 'About',
      	count : 200
      },
      mutations: {
      	subCount(state){
      		state.count--;
      	}
      },
      actions: {
      	subCount(context){
      		console.log("About");
      		context.commit('subCount');
      	}
      }
    }

about.vue

<template>
      <div class="about">
        <img alt="Vue logo" src="../assets/logo.png"><br />
        <h1>我是：{
       {name}}</h1><br />
        <h2>count : {
       {count}}</h2>
        <button @click="subCount"> - </button>
      </div>
    </template>
    
    <script>
    	import { mapState, mapActions } from 'vuex'
    export default {
    	computed : {
    		...mapState('about', {
    			name : state => state.name,
    			count : state => state.count
    		})
    	},
    	methods : {
    		...mapActions('about', [
    			'subCount'		//about/subCount
    		])
    	}
    }
    </script>

运行效果如下：

![20190929225407140.gif][]

例2：

**vuex中分模块开发-state**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 14][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 15][]![20191110232219737.png][]![20191110232223232.png][]![20191110232225387.png][]

**vuex中分模块开发-mutations,actions**

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 16][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 17][]![2019111023235427.png][]![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 18][]![20191110232403490.png][]![20191110232407963.png][]

注意：上面home.js和about.js中的**namespaced : true** 表示设置命名空间。

默认情况下，模块内部的 action、mutation 和 getter 是注册在**全局命名空间**的——这样使得多个模块能够对同一 mutation 或 action 作出响应。

如果你希望你的模块具有更高的封装度和复用性，你可以通过添加 **`namespaced: true` **的方式使其成为带命名空间的模块。当模块被注册后，它的所有 getter、action 及 mutation 都会自动根据模块注册的路径调整命名。

推荐博客：[https://blog.csdn.net/weixin\_43720095/article/details/89764560][https_blog.csdn.net_weixin_43720095_article_details_89764560]

[Link 1]: https://vuex.vuejs.org/zh/
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70]: /images/20210725/4c5229764ee24f3eac443615846472e1.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 1]: /images/20210725/77b9bbe7f46340dca7b5ff53130e0700.png
[20190922104039786.gif]: /images/20210725/4e01fe8e91bb4cc5b82c28b4e93a6018.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 2]: https://img-blog.csdnimg.cn/20191110231738861.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 3]: https://img-blog.csdnimg.cn/20191110231743832.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191110231753302.png]: https://img-blog.csdnimg.cn/20191110231753302.png
[20191110231758386.png]: https://img-blog.csdnimg.cn/20191110231758386.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 4]: https://img-blog.csdnimg.cn/20191110231807332.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 5]: /images/20210725/af4090176ce24a188a0b66cc0138ecda.png
[20190922115205802.gif]: /images/20210725/0c2ccc13342c4717a2840698db1e32b0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 6]: https://img-blog.csdnimg.cn/2019111023194873.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 7]: https://img-blog.csdnimg.cn/20191110231951284.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 8]: /images/20210725/0c5abefbdb224b2f8cd044c2c3354b40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 9]: https://img-blog.csdnimg.cn/20191110232016375.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 10]: /images/20210725/a8ed632b333e4b31855e32ea3d68715a.png
[20191110232024688.png]: /images/20210725/e8bc11c811fe48388b6ec29fbb9ab8f0.png
[2019092412315839.gif]: /images/20210725/02e0b71ecb71487fb63cb2dfb8b71f40.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 11]: https://img-blog.csdnimg.cn/20191110232100475.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 12]: https://img-blog.csdnimg.cn/20191110232103669.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191110232110565.png]: https://img-blog.csdnimg.cn/20191110232110565.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 13]: /images/20210725/21f52b6cf36144da8d9d4f67b0696403.png
[20190924125517345.gif]: /images/20210725/8c4e0d57ca034b99a641df4727250cac.png
[Link 2]: https://vuex.vuejs.org/zh/guide/modules.html
[2019092922523824.png]: /images/20210725/2a504839a35840aeb33190fbb05a6988.png
[20190929225407140.gif]: /images/20210725/4ab3d15c8b2046f58dedab6673e6ecdf.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 14]: https://img-blog.csdnimg.cn/20191110232211159.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 15]: https://img-blog.csdnimg.cn/20191110232215394.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191110232219737.png]: https://img-blog.csdnimg.cn/20191110232219737.png
[20191110232223232.png]: https://img-blog.csdnimg.cn/20191110232223232.png
[20191110232225387.png]: /images/20210725/9ca8bbbeee914da1b65acdc3bbc3786f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 16]: https://img-blog.csdnimg.cn/20191110232231173.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 17]: https://img-blog.csdnimg.cn/20191110232349820.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[2019111023235427.png]: https://img-blog.csdnimg.cn/2019111023235427.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2_size_16_color_FFFFFF_t_70 18]: https://img-blog.csdnimg.cn/20191110232357745.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzQwMzIzMjU2,size_16,color_FFFFFF,t_70
[20191110232403490.png]: https://img-blog.csdnimg.cn/20191110232403490.png
[20191110232407963.png]: /images/20210725/4237f360f10245e7a552a31d031bffe7.png
[https_blog.csdn.net_weixin_43720095_article_details_89764560]: https://blog.csdn.net/weixin_43720095/article/details/89764560