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>
