Vuex的安装及使用axios请求实例案例

在实际开发过程中，经常会遇到在不同的页面发送相同的请求，这样就会造成代码冗余和耦合度偏高的问题，举个栗子：

 在该页面中，发送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中的数据改变。

 上图中，在actions中写异步请求，回调响应的时候，需要用context.commit去触发mutations中的Allport方法，记住！commit是用来触发mutations中的方法的，因为在actions中，是不能直接修改state中的数据的！context是一个形参，用来调用commit方法的，

 接下来就好理解了，mutations中的方法就是将actions中请求到的数据赋值给wordPort，这样wordPort中的数据就有了：

 在前台接收数据：

 数据在Vuex中已经存在了，那么我们如何在页面中去接收这个数据呢？很简单，使用this.$store.dispath(‘actions中的方法名’)

 以上做了个测试，这样就能拿到数据了