vuex的辅助函数

https://www.cnblogs.com/samve/p/10726629.html

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

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.importVuefrom'vue'importElementUIfrom'element-ui'import'element-ui/lib/theme-chalk/index.css'importAppfrom'./App'importrouterfrom'./router/router.js'importstorefrom'./store'importechartsfrom'echarts'

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

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

​

index.js如下：

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

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

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

Count is {{某属性}}

通过computed属性可以获取到状态值，但是组件中每一个属性（如：count）都是函数，如果有10个，那么就要写10个函数，且重复写10遍return

this.$store.state不是很方便。vue 提供了mapState函数，它把state直接映射到我们的组件中。

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

对象用法如下：

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

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

import{mapState}from"vuex";exportdefault{computed: mapState([// 数组"count"]) }

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

import{mapState}from"vuex";exportdefault{computed: {      ...mapState(["count"]),      getValue(){return1;        }    } }

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

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

​

其中：

collection.js

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

footerStatus.js：

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

index.js：

importVuefrom'vue'importVuexfrom'vuex'importcollectionfrom'./modules/collection'importfooterStatusfrom'./modules/footerStatus'Vue.use(Vuex)exportdefaultnewVuex.Store({modules: {    collection,    footerStatus  }})

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

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

name: {{name}}

school: {{school}}

address: {{address}}

field: {{field}}

arrList: {{arrList}}

改变值