vuex的使用

1、 Vuex是什么？

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

2.、Vuex中默认的五种对象：

① State：存储状态（变量）
② Mutation：修改状态，并且是同步的。
③ Action：异步操作。
④ Getter：state的计算属性，它的作用主要是用来派生出一些新的状态。比如我们要把state状态的数据进行一次映射或者筛选（增删改查），再把这个结果重新计算并提供给组件使用。
⑤ Module：store的子模块，为了开发大型项目，方便状态管理而使用的。可以让每一个模块拥有自己的state、mutations、actions、getters，使得结构非常清晰，方便管理。

Vuex的状态管理流程：

注：每一个js文件就是一个模块。在这里使用的是Module对象管理所有的状态模块

src目录结构：
api：与后台通信的接口信息；
assets：全局静态文件，如图片等；
components：全局组件管理模块；
icons：图标模块；
layout：页面的头部以及菜单栏等基础组件；（所有页面都会用到）
router：路由管理模块；
store：vuex的状态管理模块；
styles：全局css样式；
views：所有的页面组件；
main.js为入口文件。

store目录结构：
index.js：全局状态调用的入口文件；
getters.js：所有modules中模块的getters计算属性的集合；
modules：所有单独的全局状态管理模块。

store目录下的index.js：

import Vue from 'vue'
import Vuex from 'vuex'
import getters from './getters'
Vue.use(Vuex)
//在这里使用了动态引入modules中的模块，省去了一个一个import进来。
const modulesFiles = require.context('./modules', false, /\.js$/)
// it will auto require all vuex module from modules file
const modules = modulesFiles.keys().reduce((modules, modulePath) => {
  const moduleName = modulePath.replace(/^\.\/(.*)\.\w+$/, '$1')
  const value = modulesFiles(modulePath)
  modules[moduleName] = value.default
  return modules
}, {})
//创建全局store
const store = new Vuex.Store({
  modules,
  getters,
})
//导出store后，需要在main.js文件中使用store才能生效。
export default store

store生成之后还需要挂载到Vue上面才行，src文件下的main.js：

import Vue from 'vue'
import 'normalize.css/normalize.css'
import ElementUI from 'element-ui'
import 'element-ui/lib/theme-chalk/index.css'
import locale from 'element-ui/lib/locale/lang/en' 
import '@/styles/index.scss' 
import App from './App'
import store from './store'  //引入全局状态管理store
import router from './router'
import '@/icons' 
import '@/permission' 

Vue.use(ElementUI)
Vue.config.productionTip = false
new Vue({
  el: '#app',
  router,
  store,  //将store挂载到Vue上面
  render: h => h(App)
})

接下来返回store目录下的getters.js：

const getters = {
  // 以下箭头函数中的data和queryCondition就是thirdPartyList模块中定义的state。
  getGuarantorData: state => state.thirdPartyList.data,
  getQueryCondition: state => {
    const { queryCondition } = state.thirdPartyList;
    // 在这里对queryCondition进行了筛选操作，
    if (queryCondition['name']) {
	  delete queryCondition['name']
    }
    return queryCondition;
  }
}
export default getters

接下来就是最主要的状态模块的操作，请看thirdPartyList模块：

import { fetchGuarantorPageList } from '@/api/thirdParty'  //此处导入的是axios封装的api接口名称
// 初始化状态，此处定义了两个对象分别为data和queryCondition
const state = {
  data: {},
  queryCondition: {}
}
// 异步操作，调用后台api处理返回的数据
const actions = {
  fetch(state, payload) {  //fetch为自定义名称，这里写什么都可以
    const { request, token } = payload;
    // 此处return一个Promise是为了可以在组件中进行response的处理
    return new Promise((resolve, reject) => {
      fetchGuarantorPageList(request, token).then(response => {
        state.commit('SAVE', { request, response }); //触发mutations的SAVE方法，名称一般大写
        resolve(response);
      }).catch(error => {
        reject(error)
      })
    })
  }
}
// 同步处理state数据
const mutations = {
  SAVE: (state, actions) => {
    const {
      request: { queryCondition },
      response: { data }
    } = actions;
    state.data = data;
    state.queryCondition = queryCondition;
  }
}

export default {
  /**
   *namespaced:
   *命名空间，为了解决不同模块命名冲突的问题，
   *在调用actions或mutatios中方法时需要加上空间名称，如：'thirdPartyList/fetch'
   **/
  namespaced: true, 
  state,
  mutations,
  actions
}

以上就是store的状态操作管理，那么如何去调用actions中的方法，并且如何获取全局状态呢？
如下，我们需要在页面中使用this.$store.dispatch()方法调用action，使用mapGetters来获取全局状态。

<template>
	<div style="padding:30px;background:#fff;">
		<form-input v-bind:getGuarantorData="getGuarantorData" v-bind:listQuery="listQuery" />
		<table-list v-bind:getGuarantorData="getGuarantorData" v-bind:listQuery="listQuery" />
	</div>
</template>
<script>
	import FormInput from './components/FormInput'
	import TableList from './components/TableList'
	import { mapState, mapGetters, mapActions } from 'vuex'
	export default {
		name: 'ThirdPartyQuery',
		components: {
			FormInput,
			TableList
		},
		data() {
			return {
				listQuery: {
					token: this.$store.getters.token,
					request: {
						page: 1,
						limit: 10,
						queryCondition: {}
					}
				}
			}
		},
		mounted() {
			this.$store.dispatch('thirdPartyList/fetch', this.listQuery); //调用action
		},
		computed: {
			...mapGetters(['getGuarantorData'])  //获取全局state状态getGuarantorData
		}
	}
</script>

Vuex参考文档：Vuex是什么？