vuex 知识点汇总（含工作流程机制）

野性酷女 2021-07-25 13:52 459阅读 0赞

# vuex #

vuex是一款针对vue的状态管理工具  
vue本身自带着store模式，其实就是全局注册一个对象，实现数据共享，适合小型数据量少的项目。  
vuex适合复杂的单页面应用，涉及到多层次嵌套，多层次组件传值，不同视图对一个状态或者接口的处理。

# 一 vuex的五大核心 #

state/getters/mutations/actions/module  
vuex四大辅助函数：mapState mapGetters mapMutations mapActions

# 二 vuex的工作流程 #

1.  客户端操作事件，dispatch调用一个action
2.  对应的action处理参数，比如接口/逻辑操作/传值/commit一个type类型
3.  mutation接收一个type类型触发对应的函数，修改state的值
4.  state更改后对应的view视图在render的作用下重新渲染

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]

# 三 vuex项目中的使用 #

#### 1.首先安装vue项目和vuex ####

推荐使用npm cnpm yran git  
npm 方式  
`npm install -g vue-cli`  
`vue init webpack hello`  
`npm install vuex --save`

yarn方式  
`yarn install -g vue-cli`  
`vue init webpack hello`  
`yarn add vuex`

安装好吼吼，在package.json中会有对应名字和版本

#### 2.新建store文件 ####

在src路径下创建一个store文件，里面创建一个Index.js  
在main.js的入口文件引入并在new vue中初始化  
注意引入的使用不加\{\}会报错，引入方式如下：  
`import { store } from "./store/index"`  
![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]

#### 3.创建基本的vuex结构 ####

在store/index.js中创建基本的vuex结构

import Vue from "vue";
    import Vuex from "vuex";
    Vue.use(Vuex)
    export const store = new Vuex.Store({ 
    	state:{ 
    		count:6
    	},
    	getters:{ 
    		doCount:(state,getters)=>{ 
    			return getters.doneTodos.length
    		},
    		// getters里的第一个参数是state,第二个参数是getters本身
    		doneTodos:(state)=>{ 
    			return state.count +2
    		}
    	],
    	mutations:{ 
    		counts(state,v){ 
    			state.count = v;
    		},
    		addNum(state,v){ 
    			if(v){ 
    				state.count += v;
    			}else{ 
    				state.count ++
    			}
    		},
    		reduceNum(state){ 
    			state.count --
    		}
    	},
    	actions:{ 
    		actionNumAdd(v){ 
    			// axios.get("/customer/user_info").then(res=>{ 
    			// v.commit(addNum,res.data);
    			//})
    			// 这里科技直接调用接口并赋值，第一个参数是mutation里面对应的名字，第二个参数是传递的值
    			v.commit('addNum',6);
    		},
    		actionNumReduce(v){ 
    			//axios.get("/customer/user_info").then(res=>{ 
    			// v.commit(addNum,red.data)
    			//})
    			v.commit('reduceNum',6);
    		}
    	}
    })

#### 4.调用vuex ####

下面的实例调用都是用的辅助函数，在刚创建好的App.vue实例基础上调用

<template>
    	<div id="app">
    		<input v-model="counts" />
    		<input v-model="getternum" />
    		<button @click="addnum1">mutation+1</button>
    		<button @click="actionnum6">action+6</button>
    		<router-view />
    	</div>
    </template>
    <script>
    	import { mapState,mapMutaitons,mapActions,mapGetters}  from "vuex";
    	export defatult { 
    		data(){ 
    			return{ }
    		},
    		computed:{ 
    			...mapState({ 
    				counts:state=>state.count
    			}),
    			...mapGetters({ 
    				getternum:'doneTodos'
    			})
    		},
    		methods:{ 
    			...mapMutations({ 
    				addNum:'addNum'
    			}),
    			...mapActions({ 
    				actionnum:'actionNumAdd'
    			}),
    			addnum1(){ 
    				this.addnum();
    			},
    			actionsnum6(){ 
    				this.actionnum();
    			}
    		}
    	}
    </script>

显示效果

1.  初始值是count6 ，用mapState调用count = 6;
2.  用mapGetters调用并基础加了2，所以第二个count为8，并不影响state的值
3.  用mapMutations调用mutations里的方法，让count累加1，点击触发后的state值变7，getters值变9
4.  用mapActions调用acitons的方法，让count累加6，点击后state值变13，getters值变15

# vuex的四大语法糖 #

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]  
注意  
mapState和mapGetter的使用只能在computed计算属性中，  
mapMutations和mapActions使用的时候只能在methods中调用否则报错

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70]: /images/20210725/379dce39eb58419ba0ae98ac81f6b87f.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 1]: /images/20210725/c1d9008e024a4b189080ea56ac034fc0.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3llaGFvY2hlbmc1MjA_size_16_color_FFFFFF_t_70 2]: /images/20210725/b3e7bdca9787421392238a057fb6c747.png