带你玩转vue——vuex的概述

前言

我们学会了使用vue工程化前端工程，那么我们就要思考何为工程？我认为工程就应该是一个整体，盖一栋大楼就是一个工程，上楼我们有上楼的工具——电梯，用电我们有输送电力的工具——电缆。总之，我们在大楼里享受的所有服务都有专门为之配套的设备，他们搭配在同一个框架上形成一个工程，同样我们的前端工程也有各种各样的工具搭建在我们vue-cli上！而vuex是其中最重要的工具之一，它被用来管理项目中的全局变量，使工程中的每一个部分都可以相互合作从而成为一个整体，为开发者节省更多梳理全局变量的时间和更快捷的服务，也让vue变得更加友好！！

vuex的地位

vuex是一个存储全局变量的容器，其中的变量通过特定的方式被改变。同时它是整个项目的中枢系统，是项目中重要变量的管理工具。

vuex的使用场景

在没有vue之前，我们的web项目是由一个个或html或jsp，或跳转或嵌套iframe组成前端页面，页面之间相互跳转会传递一堆的参数，进入页面第一件事情就是取参，各种变量非常难以管理。

在vue工程中我们可以将一些本来在很多页面都用到的变量、常量提取出来。比如我们的后端调用路径，因为前后端分离的缘故，我们的后端地址肯定是绝对路径，如果我们没有使用vuex去管理这个变量，当我们的后端地址发生改变的时候，我们就需要去修改每个http请求的路径，如果我们使用了vuex，只需要在vuex文件中修改一次即可，而且可以保证没有遗漏！！

vuex的结构

import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
  state: {
    baseUrl: 'http://127.0.0.1:7001/imeterx/'
  },
  getters: {
  },
  mutations: {
  },
  actions: {
  }
})

预知后事如何，且听下回分解