vuex mapState、mapGetters、mapActions、mapMutations的使用
import Vue from 'vue' import Vuex from 'vuex' import mutations from './mutations' import actions from './action' import getters from './getters' Vue.use(Vuex) const state = { userInfo: { phone: 111 }, //用户信息 orderList: [{ orderno: '1111' }], //订单列表 orderDetail: null, //订单产品详情 login: false, //是否登录 } export default new Vuex.Store({ state, getters, actions, mutations, })
computed: { ...mapState([ 'orderList', 'login' ]), }, mounted(){ console.log(typeof orderList); ==>undefind console.log(typeof this.orderList)==>object }
mapState通过扩展运算符将store.state.orderList 映射this.orderList 这个this 很重要,这个映射直接映射到当前Vue的this对象上。
所以通过this都能将这些对象点出来,同理,mapActions, mapMutations都是一样的道理。牢记~~~
import Vuex from 'vuex'import Vue from 'vue'Vue.use(Vuex) export default new Vuex.Store({ state:{ data:'test' }, getters:{ }, mutations:{ }, actions:{ } })
<template> <div id="app"> {{count}} //{{data}} </div> </template> <script>//想要使用 首先需要按需引入import {mapState,mapGetters,mapMutations,mapActions} from 'vuex'export default { // 通过对象展开运算符将count混入computed对象中,作为computed对象的方法使用 computed:{ //相当于 // count(){ // return this.$store.state.data // } //采用对象方式相当于重命名 ...mapState({ count: 'data' }) //采用数组方式 //...mapState([data]) //可在其他钩子中使用this.data调用 } //其他mapGetters,mapMutations,mapActions原理一样 } </script> <style> </style>
另外mapState通过扩展运算符将store.state.data映射this.count 这个this 很重要,这个映射直接映射到当前Vue的this对象上。
在钩子函数中可直接 this.count调用
当state,mutations,actions数量很多时,在一个文件夹下不方便管理。可把state,getters,mutations,actions分别写在不同文件内,通过export 导出。再在一个文件中引入。
例如:
//state.js const state={ count:10 } export default state; //切记记得导出
//getters.js export const gets= state => state.count //这里直接导出 就不用export default 相当于 gets=function(state){ return state.count }
//mutations.js const mutations={ add(state){ state.count+=1 }, sub(state){ state.count-=1 } } export default mutations;
//actions.js export const addactions=(context)=>{ context.commit('add') } export const subactions=(context)=>{ context.commit('sub') }
所有文件导出后在一个文件内统一引入
//store文件夹下的store.js import Vue from 'vue' import Vuex from 'vuex' import state from './state.js' //由于上边的getters.js 和actions.js是通过export 导出每一个, import * as getters from './getters.js' import mutations from './mutations.js' import * as actions from './actions.js' Vue.use(Vuex) export default new Vuex.Store({ state, getters, mutations, actions })
使用
<template> <div id="app"> <div>数量{{count}}</div> <div @click="add">增加</div> <div @click="sub">减少</div> </div> </template> <script> import {mapState,mapGetters,mapMutations,mapActions} from 'vuex' export default { computed:{ //注意这里可以直接使用,因为通过...mapxxx引进来,因为是state,所以可以直接当对象的属性使用,若是mutations,actions则当对象的方法使用。 ...mapState(["count"]) }, methods:{ ...mapMutations(["add","sub"]) } }</script>