Vue —— 进阶 Vuex（零）（概念、工作原理、环境搭建、基本使用、getters）

Vue2.x 系列文章目录

内容	参考链接
Vue2.x - 基础	Vue2.x - 基础
Vue2.x - 进阶	Vue2.x - 进阶脚手架
Vue2.x - 高级 Vuex	Vuex概念、工作原理、环境搭建、基本使用、getters
Vue2.x - 高级 Vuex	Vuex 四个 map 的用法、模块化和命名空间
Vue2.x - 高级 Vue-router	路由的概念、基本使用
Vue2.x - 高级 Vue-router	嵌套路由、query参数、命名路由、params参数、props配置
Vue2.x - 高级 Vue-router	replace属性、编程式路由导航、缓存路由组件、路由的专属钩子
Vue2.x - 高级 Vue-router	全局路由守卫
Vue3.0 - 新增	Vue3.0 新增内容
Vue2.x 项目（附源码）	Vue + ElementUI 后台管理项目（附源码）
Vue3.0 项目	Vue3.0 企业级 App

---

一、理解 vuex

1. 什么是 vuex？

概念：专门在 Vue 中实现集中式状态（数据）管理的一个 Vue 插件，对 vue 应用中多个组件的共享状态进行集中式管理（读 / 写），也是一种组件间的通信方式，且适用于任意组件间通信。

2. 什么时候使用 vuex？

1. 多个组件依赖于同一个状态
2. 来自不同组件的行为需要变更同一状态

二、求和案例（纯vue版）

1. 第一个下拉栏控制每次加或减的数值。
2. 加一
3. 减一
4. 当和为奇数时再加
5. 等一等再加

Count.vue

	<template>
	  <div>
	    <h2>当前求和为：{{sum}}</h2>
	    <select v-model.number="n">
	      <option :value="1">1</option>
	      <option :value="2">2</option>
	      <option :value="3">3</option>
	    </select>
	    <button @click="increment">+</button>
	    <button @click="decrement">-</button>
	    <button @click="incrementOdd">当前求和为奇数再加</button>
	    <button @click="incrementWait">等一等再加</button>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myCount",
	  data(){
	    return{
	      n:1, //用户选择的数字
	      sum: 0 //当前的和
	    }
	  },
	  methods:{
	    increment(){
	      this.sum += this.n
	    },
	    decrement(){
	      this.sum -= this.n
	    },
	    incrementOdd(){
	      if(this.sum % 2){
	        this.sum += this.n
	      }
	    },
	    incrementWait(){
	      setTimeout(()=>{
	        this.sum += this.n
	      },500)
	    }
	  }
	};
	</script>
	
	<style scoped>
	  button{
	    margin-left: 5px;
	  }
	</style>

App.vue

	<template>
	  <div>
	    <Count/>
	  </div>
	</template>
	
	<script>
	// 引入组件
	import Count from "./components/Count.vue";
	export default {
	  name: "App",
	  components: { Count },
	};
	</script>

三、vuex 工作原理图

1. 理解

1. Vue Components：看作顾客
2. Actions：看作点餐服务员
3. Mutations：看作后厨厨师
4. State：看作上来的菜

Actions：可以不经过它，它可以连接后端的一些接口。

四、搭建 vuex 环境

1. 安装 vuex

终端键入命令：npm i vuex@3
对应的是 vue2.x 版本

2. 创建文件

在 src 文件下创建文件：src/store/index.js

	// 该文件用于创建Vuex中最为核心的store
	// 引入vue核心库
	import Vue from 'vue'
	// 引入Vuex
	import Vuex from 'vuex'
	// 应用Vuex插件
	Vue.use(Vuex)
	
	// 准备actions——用于响应组件中的动作
	const actions = {}
	// 准备mutations——用于修改state中的数据（state）
	const mutations = {}
	// 准备state——用于存储具体的数据
	const state = {}
	
	// 创建并暴露store
	export default new Vuex.Store({
	    actions,
	    mutations,
	    state
	})

在 main.js 中创建 vm 时传入 store 配置项。

	// 引入 Vue
	import Vue from 'vue'
	// 引入 App
	import App from './App.vue'
	// 引入 store
	import store from './store'
	// 关闭 vue 的生产提示
	Vue.config.production = false
	
	// 使用插件
	
	//创建 vm
	new Vue({
	    el:'#app',
	    render: h => h(App),
	    store
	})

五、求和案例（vuex版）

Count.vue

1. 在 Count.vue 的 methods 中配置方法。
2. 简单的逻辑，直接在 methods 中 this.$store.commit('方法', 数据)。（此处的方法为 index.js 中 mutations 中配置的方法）
3. 复杂的逻辑，通过在 methods 中 this.$store.dispatch('方法', 数据)。（此处的方法为 index.js 中 actions 中配置的方法）
4. 页面呈现时的模板语法：{{$store.state.sum}}

	<template>
	  <div>
	    <h2>当前求和为：{{$store.state.sum}}</h2>
	    <select v-model.number="n">
	      <option :value="1">1</option>
	      <option :value="2">2</option>
	      <option :value="3">3</option>
	    </select>
	    <button @click="add">+</button>
	    <button @click="sub">-</button>
	    <button @click="addOdd">当前求和为奇数再加</button>
	    <button @click="addWait">等一等再加</button>
	  </div>
	</template>
	
	<script>
	export default {
	  name: "myCount",
	  data(){
	    return{
	      n:1, //用户选择的数字
	      sum: 0 //当前的和
	    }
	  },
	  methods:{
	    add(){
	      this.$store.commit("ADD", this.n);
	    },
	    sub(){
	      this.$store.commit("SUB", this.n);
	    },
	    addOdd(){
	      this.$store.dispatch("addOdd", this.n);
	    },
	    addWait(){
	      this.$store.dispatch("addWait", this.n);
	    }
	  }
	};
	</script>
	
	<style scoped>
	  button{
	    margin-left: 5px;
	  }
	</style>

index.js

1. 在 state 中准备用于存储的数据 sum。
2. 在 mutations 中准备用于修改 state 中数据的函数 ADD 和 SUB。（注意配置在 mutations 中的函数名一般大写）。
3. 在 actions 中准备用于响应组件的函数 addOdd 和 addWait。

	// 该文件用于创建Vuex中最为核心的store
	// 引入vue核心库
	import Vue from 'vue'
	// 引入Vuex
	import Vuex from 'vuex'
	// 应用Vuex插件
	Vue.use(Vuex)
	
	// 准备actions——用于响应组件中的动作
	const actions = {
	    addOdd(context, value){
	        console.log('actions中的addOdd被调用了');
	        if(context.state.sum % 2){
	            context.commit('ADD',value)
	        }
	    },
	    addWait(context, value){
	        console.log('actions中的addWait被调用了');
	        setTimeout(()=>{
	            context.commit('ADD', value)
	        },500)
	    }
	}
	// 准备mutations——用于修改state中的数据（state）
	const mutations = {
	    ADD(state, value){
	        console.log('mutations中的ADD被调用了',state, value);
	        state.sum += value
	    },
	    SUB(state, value){
	        console.log('mutations中的SUB被调用了',state, value);
	        state.sum -= value
	    }
	}
	// 准备state——用于存储具体的数据
	const state = {
	    sum: 0 //当前的和
	}
	// 创建并暴露store
	export default new Vuex.Store({
	    actions,
	    mutations,
	    state
	})

vuex求和展示

六、vuex 的基本使用

1. 步骤

./store/index.js

1. 初始化数据
2. 配置 actions
3. 配置 mutations：里面的函数名一般大写
4. 操作文件 index.js

	// 引入Vue核心库
	import Vue from 'vue'
	// 引入Vuex
	import Vuex from 'vuex'
	// 引用Vuex
	Vue.use(Vuex)
	
	const actions = {
	    // 响应组件中加的动作
	    add(context, value){
	        context.commit('ADD', value)
	    }
	}
	const mutations = {
	    // 执行加
	    ADD(state, value){
	        state.sum += value
	    }
	}
	// 初始化数据
	const state = {
	    sum: 0
	}
	// 创建并暴露
	export default new Vuex.Store({
	    actions,
	    mutations,
	    state
	})

2. 组件中读取 vuex 中的数据

在组件的模板里面读取不需要加 this，在组件的 JS 里面写需要加 this。

	$store.state.sum

3. 组件中修改 vuex 中的数据

经过 actions 到 mutations 用 dispatch。

	$store.dispatch('actions中的方法名', 数据)

直接到 mutations 用 commit。

	$store.commit('mutations中的方法名', 数据)

注意：若没有网络请求或其他业务逻辑，组件中也可以越过 actions，即不写 dispatch，直接编写 commit。

七、getters 的使用

1. 概念

当 state 中的数据需要经过加工后再使用时，可以使用 getters 加工。（逻辑较为复杂时使用，可以被多个组件复用）。

2. 在 .store/index.js 中追加 getters 配置

	.....
	const getters = {
		bigSum(state) {
			return state.sum * 10
		}
	}
	.....
	export dafault new Vuex.Store({
		.....
		getters
	})

3. 实例：数字扩大 10 倍

store.js

1. 在该文件下追加配置

	.....
	const getters = {
		bigSum(state) {
			return state.sum * 10
		}
	}
	.....
	export dafault new Vuex.Store({
		.....
		getters
	})

Count.vue

1. 添加模板字符串，在组件中读取数据 $store.getters.bigSum，其余不变

	<h3>当前求和放大10倍：{{$store.getters.bigSum}}</h3>

八、vuex 与 vue 的类比

1. vuex 中的 state 相当于 vue 中的 data。
2. vuex 中的 mutations 相当于 vue 中的 methods。
3. vuex 中的 getters 相当于 vue 中的 computed。
4. vuex 中的 actions 相当于 vue 中的 methods
5. 注意：同步方法写在 mutations，异步写在 actions 里。

不积跬步无以至千里 不积小流无以成江海

点个关注不迷路（持续更新中…）