在实际开发过程中，经常会遇到在不同的页面发送相同的请求，这样就会造成代码冗余和耦合度偏高的问题，举个栗子：
在该页面中，发送axios请求拿到数据库中港口列表的数据，然而在另一个页面中，需要做下拉或者单选框，里面的内容可能就是港口的名称：如下图
按照正常逻辑，需要在该页面再次发送请求拿到后台数据，如果数据库中数据量过多，一来会给数据库形成压力，二来请求频繁，代码冗余。那么该如何去做才能避免这样的情况发生呢？
Vue给我们提供了Vuex，用来存放共享数据，叫做状态管理模式。它采用的集中式存储管理应用的所有组件的状态。
安装：
注意：区分版本，vuex分3.x版本和4.x版本,分别对应vue2.0与3.0
也就是说,vue2.0只能安装vuex3.x版本,最高3.6.2,vue3.0才能装vuex4.x版本
npm install vuex --save 安装依赖 ，这时如果直接安装vuex，不指定版本的话，就会直接安装最新的vuex的版本。所以会出现报错。
报错就安装这个npm install --save vuex@3，这个3代表的就是vuex的版本，vue2的使用这个，vue3的使用下面这个：npm install --save vuex@4。
安装完成之后，在src目录中新建store文件夹，或者直接新建一个js文件都可以，目录如下：
在vuex中有5个核心概念，这5个核心概念需要做区分，非常重要！分别是State，Getter，Mutations，Actions，Modules。本篇文章主要讲述3个重要的概念：State，Mutations，Actions。
安装完成后，在main.js中将store挂载vue上：
在store的index.js中：
// 注册vuex
import Vuex from 'vuex'
import Vue from 'vue'
import axios from 'axios'
Vue.use(Vuex)
const store = new Vuex.Store({
state: {}, // 存放数据
getters: {}, // 计算属性
mutations: {}, // 修改state中数据的一些方法
actions: {}, // 异步方法
modules: {} // store模块
})
// 暴露实例
export default store代码片段献上！
注意！在vuex中，state中只能存放数据，mutations中只能是修改数据的方法，而一些异步的方法只能放在actions中，不能放错位置！
所以，通过vuex中的axios异步方法获取共享数据可能偏繁琐，接着看：
当我需要从数据库中通过axios请求获取数据，那么，需要按步骤来，1、在axios中放异步方法，2、将获取到的数据给到mutations中，3、在mutations中将state中的数据改变。
记住！commit是用来触发mutations中的方法的，因为在actions中，是不能直接修改state中的数据的！context是一个形参，用来调用commit方法的，
接下来就好理解了，mutations中的方法就是将actions中请求到的数据赋值给wordPort，这样wordPort中的数据就有了：
在前台接收数据：
数据在Vuex中已经存在了，那么我们如何在页面中去接收这个数据呢？很简单，使用this.$store.dispath(‘actions中的方法名’)
以上做了个测试，这样就能拿到数据了
