vue：vuex中mapState、mapGetters、mapActions辅助函数及Module的使用

一、普通store中使用mapState、mapGetters辅助函数：

在src目录下建立store文件夹：

​

index.js如下：

import Vue from 'vue'; import Vuex from 'vuex'; Vue.use(Vuex); const state={//要设置的全局访问的state对象 showFooter: true, changableNum:0 count: 0 //要设置的初始属性值 }; const getters = { //实时监听state值的变化(最新状态) isShow(state) { //方法名随意,主要是来承载变化的showFooter的值 return state.showFooter }, getChangedNum(){ //方法名随意,主要是用来承载变化的changableNum的值 return state.changebleNum } }; const mutations = { show(state) { //自定义改变state初始值的方法，这里面的参数除了state之外还可以再传额外的参数(变量或对象); state.showFooter = true; }, hide(state) { //同上 state.showFooter = false; }, newNum(state,sum){ //同上，这里面的参数除了state之外还传了需要增加的值sum state.changableNum+=sum; } }; const actions = { hideFooter(context) { //自定义触发mutations里函数的方法，context与store 实例具有相同方法和属性 context.commit('hide'); }, showFooter(context) { //同上注释 context.commit('show'); }, getNewNum(context,num){ //同上注释，num为要变化的形参 context.commit('newNum',num) } }; const store = new Vuex.Store({ state, getters, mutations }); export default store; 

vue提供了注入机制，就是把我们的store 对象注入到根实例中。vue的根实例就是 new Vue构造函数，然后在所有的子组件中this.$store 来指向store 对象。在index.js 中，我们用export store把store已经暴露出去了，然后直接在main.js中引入store并注入store即可。

// 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 ElementUI from 'element-ui' import 'element-ui/lib/theme-chalk/index.css' import App from './App' import router from './router/router.js' import store from './store' import echarts from 'echarts' Vue.config.productionTip = false Vue.use(ElementUI) Vue.use(echarts) Vue.prototype.$echarts = echarts /* eslint-disable no-new */ new Vue({ el: '#app', router, store, components: { App }, template: '<App/>' }) 

子组件中的computed属性是根据它的依赖自动更新的，所以只要store中的state发生变化，它就会自动变化，在一般情况下子组件中获取store中属性的方式如下：

<template><div>
  <h3>Count is {{某属性}}</h3> </div> </template> <script> export default { computed: { count () { return this.$store.state.某属性 } } } </script>

通过computed属性可以获取到状态值，但是组件中每一个属性（如：count）都是函数，如果有10个，那么就要写10个函数，且重复写10遍return this.$store.state不是很方便。vue 提供了mapState函数，它把state直接映射到我们的组件中。

当然使用mapState之前要先引入它，它两种用法，或接受一个对象，或接受一个数组，其中使用对象的方式又有三种方法。

对象用法如下：

<script>import {mapState} from "vuex"; // 引入mapState export default { 　　// 下面这三种写法都可以 computed: mapState({ // 箭头函数可使代码更简练 count: state => state.count, // 传字符串参数 'count' 等同于 `state => state.count` countAlias: 'count', // 为了能够使用 `this` 获取局部状态，必须使用常规函数 countPlusLocalState (state) { return state.count + this.localCount } }) } </script>

当映射的计算属性的名称与state的子节点名称相同时，我们也可以给 mapState传一个字符串数组。

<script>import {mapState} from "vuex"; export default { computed: mapState([ // 数组 "count" ]) } </script>

如果我们组件内部也有computed属性怎么办？它又不属于mapState，我们可以使用es6中的对象分割语法，把mapState函数生成的对象再分割成一个个的，就像最开始的时候我们一个一个罗列计算属性，有10个属性，我们就写10个函数。

<script>import {mapState} from "vuex"; export default { computed: { ...mapState([ "count" ]), getValue(){ return 1; } } } </script>

二、Module中使用mapState、mapGetters、mapActions辅助函数：

在src目录下建立store文件夹：

​

其中：

collection.js

//collection.js

const state={ collects:['hi'], //初始化一个colects数组 field: '空天作战任务规划' }; const getters={ }; const mutations={ }; const actions={ }; export default { namespaced:true,//用于在全局引用此文件里的方法时标识这一个的文件名 state, getters, mutations, actions } 

footerStatus.js：

//footerStatus.js

const state={ //要设置的全局访问的state对象 name: 'beautiful', address: 'Hunan Changsha', school: '国防科大', showFooter: true, changableNum:0 //要设置的初始属性值 }; const getters = { //实时监听state值的变化(最新状态) }; const mutations = { changeSchool(state, value){ state.school = value; } }; const actions = { _changeSchool(context, value){ context.commit('changeSchool', value) } }; export default { namespaced: true, //用于在全局引用此文里的方法时标识这一个的文件名 state, getters, mutations, actions } 

index.js：

import Vue from 'vue' import Vuex from 'vuex' import collection from './modules/collection' import footerStatus from './modules/footerStatus' Vue.use(Vuex) export default new Vuex.Store({ modules: { collection, footerStatus } }) 

假如我们想在组件中使用module中的state、getters、mutations、actions，那该如何使用呢？

除了和普通store一样需要在main.js中注入store外，具体方法如下：

<template><div>
    <p>name: {{name}}</p> <p>school: {{school}}</p> <p>address: {{address}}</p> <p>field: {{field}}</p> <p>arrList: {{arrList}}</p> <div><button @click="changeSchool()">改变值</button></div> </div> </template> <script> import {mapState, mapGetters} from 'vuex' export default { data(){ return { use: 'vuex高级使用方法' } }, computed: { ...mapState({ name: state => state.footerStatus.name, address(state){ return state.footerStatus.address; } }), ...mapState('footerStatus', { school: 'school' }), ...mapState('collection', ['field']), _use(){ this.use; }, ...mapGetters('collection', { arrList: 'renderCollects' }) }, methods: { changeSchool(){ this.$store.dispatch("footerStatus/_changeSchool", '北大'); } } } </script> <style scoped> </style>