理解 Vuex 的来龙去脉

vuex介绍

• 官网解释为 “vuex是一个专为vue.js应用程序开发的状态管理模式，它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化”。一路看下来，一头雾水了。

• 简单来说，这东西就是管理一些通用数据的。“状态” 可以理解为数据的值，”状态管理“ 也就是当有数据的值改变时，应用了该数据的所有页面都更新。

• 比如多个组件之间有共通的数据，也就是说其中一个改变另外的数据也要跟着改变，但众所周知，组件之间传值很复杂，如果这样传来传去且要保证同步更新工作量巨大，而且不方便维护，假如能将该数据放入同一个地方（store）保管，其他页面都只引用该数据，只要该数据变更了，其他页面都自动变更，显然更加便捷——数据被保管起来了

看图理解vuex是怎么用的

• vuex包括state（1号）、actions（3号）、mutaions（4号）三个部分
• 1号，相当于一个仓库，将所有需要的数据存在这里面
• 4号，想要改变store中的数据（状态），只有利用这个来改变
• 3号，用于接收组件里数据的改变
• 流程：当2（组件）中数据改变时，首先得用dispatch方法调用3，然后3再用commit方法提交一个4，由4才能更改1中的状态，最后通过4 render（渲染）到对应组件
• 可能有人问了，直接提交4不就完事了？还搞个3不是脱裤子放屁？其实是因为4只能用同步函数，而3可以用异步函数（此处不展开）

举例使用vuex（长文警告）

举个例子，比如下面第一张是首页（home.vue），第二张是城市页（city.vue）。注意：以下项目是用vue-cli生成的！

---

目标：实现首页右边的 “北京” 和城市页的当前城市里的 “北京” 和热门城市里的 ”北京“ 数据同时变更，也就是状态管理

• 我们先在 main.js 文件里导入入 vuex 插件（vuex 使用前得安装，vue 官网可查），但我们不直接导入，我们先在 src 目录下创建一个store文件夹，里面创建好 index.js、mutations.js、store.js 文件，这样分文件也就是分门别类，便于管理，虽然这部分我们其实直接用一个 js 文件就可以解决状态管理

1. 在index文件中引入 vuex，并导出一个存储了数据的仓库

import Vue from 'vue'
import Vuex from 'vuex' // 引入vuex
import state from './state' // 引入state中的数据
import mutaions from '.mutaitions' // 引入mutations中的方法

Vue.use(Vuex) // 使用vuex组件

// 此处不是导出vuex，而是导出vuex创建的仓库，new...
export default new Vuex.Store({
	// 注册组件，state、mutations组件都被引入了，用时只引入index文件就够了
	state,
	mutations
})

2. state 文件中存放首页和城市页共享的数据

let defaultCity = '北京' // 默认数据为北京

export default {
	city: defaultCity // 导出城市city数据
}

3. mutaitions 文件中存放一个变更state中数据的方法

export default {
	changeCity (state, city) { // state为仓库，city为更新的城市
		state.city = city // 将仓库的city数据更新
	}
}

• 做好仓库后，就开始引入相关页面中，mapState、mapMutaions都是辅助函数，简化书写，后面将用

4. main.js 文件中引入仓库，全局可以引用

...
// 此处是引入仓库，也就是index.js文件，但可以省略不写
improt store from './store'
...

new Vue({
	...
	store
	...
})

5. home 文件

<template>
	<div ...> // 首页城市
		{{this.city}} // 引用store里的city值
	</div>
<template>

<script>
import { mapState } from 'vuex' // 引入仓库
export default {
	...
	computed: {
	// 辅助函数mapState，映射this.city为store.state.city（替换的意思）
		...mapState(['city']) // "..."是拓展运算符
	}
}
</script>
...

6. city 文件

<template>
	...
	<div ...> // 当前城市
		{{this.currentCity}}
	</div>
	<div @click="handleCityClick(city)" ...> // 热门城市
	// 该页面接收到的city传值（列表），当点击其中一个时更新当前城市和首页数据
	// 比如此处点击了上海，则当前城市变为上海，首页城市也变成上海
		{{city}}
	</div>
</template>

<script>
...
import { mapState, mapMutations } from 'vuex' // 引入仓库
export default {
	...
	computed: {
		// 映射this.currentCity为store.state.currntCity
		...mapState({
			currentCity: 'city'
		})
	},
	methods: {
		handleCityClick (city) {
			this.changeCity(city) // 映射
		},
	   // 将this.changeCity()映射为this.$store.commit('changeCity')
		...mapMutations(['changeCity'])
	}
}
</script>
...

• 总体流程就是
  • 当city页的热门城市城市中的某城市被点击时，则通过 mutations 里的 changeCity 函数更新 store 里的数据，自然当前城市、首页城市中的引用的城市数据都更新了
  • 上述并没有用到 actions，是因为没牵扯到异步操作，大可不必

---

如果觉得对你有帮助的话，点个赞呗~

反正发文又不赚钱，交个朋友呗~