Vuex的常用项目结构以及请求过程

---

更多关于Vue.js的系列文章请点击：Vue.js开发实践(0)-目录页

---

一、入门Vuex

1.1、什么是Vuex

Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。它采用集中式存储管理应用的所有组件的状态，并以相应的规则保证状态以一种可预测的方式发生变化。

简单地说，Vuex为Vue.js项目提供了统一的方法管理。

1.2、Vuex的安装

在Vue.js的webpack项目中，使用npm或者cnpm就可以安装并配置Vuex：
cnpm install vuex --save，安装完成后，在相应webpack项目的package.json文件夹里可以看到这一行配置即代表项目以及导入了Vuex的依赖:

"dependencies": {
    "vuex": "^3.0.1",
    ....
  }

二、Vuex的常用术语解释

• State:集中初始化所有变量和数据的地方
• Getters:外部获得数据的唯一点
• Actions:配置方法映射到Mutations中
• Mutations:唯一改变数据的地方，当外部触发Actions的commit时会响应其内部的相应函数。

三、Vuex的常用项目结构

Vuex的官方对Vuex的项目结构做出了一定的规范要求，即：

• 整个项目中，只能有一个状态管理量state
• 整个项目中，所有的方法映射都在actions中配置并commit给mutations
• 整个项目中，所有改变state的操作都在mutations中完成

一般来说，可以这样建立项目结构：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求，可有可无
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js      # 导出modules给外部
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

如果项目需要管理的方法和数据很多，Vuex官方推荐的项目结构为：

├── index.html
├── main.js
├── api
│   └── ... # 抽取出API请求
├── components
│   ├── App.vue
│   └── ...
└── store
    ├── index.js          # 我们组装模块并导出 store 的地方
    ├── actions.js        # 根级别的 action
    ├── mutations.js      # 根级别的 mutation
    └── modules
        ├── cart.js       # 购物车模块
        └── products.js   # 产品模块

四、vuex-demo请求流程

4.1、需求

点击增加数字或者减少数字，页面的数据动态发生变化。

4.2、Vuex的请求流程

Vuex的请求流程如图，不过现在可能不太明白，我们稍后通过具体的例子去分析这个流程：

4.3、Vuex的具体使用

首先使用vue-cli建立webpack项目，并且使用npm导入vuex，这里不再赘述。这是建立的项目结构：

• App.vue

<template>
  <div id="app">
    <button @click="addNumber()">点我增加数字！</button>
    <button @click="decNumber()">点我减少数字！</button>

    The number is:{{number}}
  </div>
</template>

<script>
  //导入getter和actions
  import {mapGetters,mapActions} from 'vuex'
  export default {
   data(){
    return{}
   },
   //mapGetters是vuex的核心组件，它在计算属性中使用，
   //用于标记需要改变的量，最后会从getters中获取
   computed:mapGetters([
    'number'
  ]),
   //mapActions用于定义actions中映射的方法名
   methods:mapActions([
    'addNumber',
    'decNumber'
  ])
 }
</script>
<style>
  #app {
    margin:auto;
  }
</style>

• demo.js

//定义状态量
const state = {
	originNumber: 0
}

//定义getters
const getters = {
	number:state=>{
		return state.originNumber
	}
}

//定义actions映射
const actions = {
 	addNumber({commit}){
 		commit('add')
 	},
 	decNumber({commit}){
 		commit('dec')
 	}
}

//真正用于修改数据的方法
const mutations = {
	add(state){
		//alert(state.originNumber)
		//修改数据
		state.originNumber++
	},
	dec(state){
		state.originNumber--
	}
}

//导出所有配置
export default {
	state,
	getters,
	actions,
	mutations
};

• store/index.js

import Vue from 'vue';
import Vuex from 'vuex';
import demo from './modules/demo';

Vue.use(Vuex);

export default new Vuex.Store({
	modules:{
		demo
	}
})

• main.js

// The Vue build version to load with the `import` command
// (runtime-only or standalone) has been set in webpack.base.conf with an alias.
import Vue from 'vue'
import app from './App'
import store from './store'
Vue.config.productionTip = false

/* eslint-disable no-new */
new Vue({
  el: '#home',
  store,
  components: { app }
})

以上四个部分就可以构成一个完整的Vuex实例了，接下来说说这几个文件中的一些关键配置的作用：

• App.vue
  这是发送Vuex请求的组件，通过@click="funcName()"去调用实例中的一个方法，这个方法通过mapActions去映射给Actions。

	methods: mapActions([‘funcName’])

• demo.js
  这是Vuex的核心配置文件，里面配置了state、getters、actions和mutations并导出所有配置，其中state定义了所有初始化数据，getters定义了获取数据的唯一点，而actions则由App.vue中的mapActions进行了映射，并且传递一个commit函数给mutations中的方法realFunc，而realFunc才是真正改变state状态的地方:

	const actions = {
	 funcName({commit}){commit('realFunc')}
}

   const mutatinos = {
	realFunc(state){//state.xxx}
}

• index.js
  位于store下的index.js的作用是获取modules下所有的Vuex配置文件，在本例中只有一个即demo.js；获取到后，通过导出Vuex.Store注册配置文件，即可在main.js中直接获取store文件夹并且在实例中挂载store了：

import Vue from 'vue';
import Vuex from 'vuex';
import demo from './modules/demo';

Vue.use(Vuex);
//导出Vuex.Store并注册Vuex核心配置文件
export default new Vuex.Store({
	modules:{
		demo
	}
})

• main.js
  main.js的作用就很明显了，它获取整个store文件夹并且挂载到需要使用Vuex的Vue实例上。

import Vue from 'vue'
import app from './App'
import store from './store'

new Vue({
  el: '#home',
  store,
  components: { app }
})

这就是Vuex的一个请求流程了，结合官方提供的流程图，我们可以发现，我们的Demo完全符合这个请求流程：
App.vue通过mapActions发送一个方法调用请求给demo.js核心配置文件中的actions，在actions中通过调用commit函数去触发位于mutations中的真正方法realFunc(state)，之后再通过这个方法改变state状态，并且渲染了实例。

以下是本例的文件请求图：