vuex的高级应用

平时使用vuex都是一些基本的使用`（this.$store.state, this.$store.commit(), this.、$store.dispatch()，今天添加了一些更高级的应用

//调用案例
import Vue from 'vue'
import Vuex from 'vuex'
Vue.use(Vuex)
export default new Vuex.Store({
	state: {
		test: 'vuex测试状态',
		price: 80
	},
	mutations: {
//vue建议我们mutations里面的最好用大写常量表示
		TESTCHANGE (state, payLoad){
			state.test = payLoad
		}
	},
	getters: {
		priceType(state) {
			return '￥' + state.price.toFixed(2)
		}
	},
	actions: {
//这里的context表示上下文，为一个对象，可以进行调用context.commit调用mutations从未改变state的数据（更好的方法可以使用解构赋值{commit}）
	     asyncOperation(context) {
                   setTimeout('异步操作'， 1000)
}
	},
	modules: {
		demoa
	}
})

//更好的方法是单独存放在一个文件夹（此处只是为了展示）
const demoa = {
	namespaced: true,
	state: {
		demoatest: 'test'
	},
	mutations: {
		DEMATEXTCHANGE(state) {
			state.demoatest = 'changeDate'
		}
	}
}

state（放入计算属性）

频繁调用this.$store.state实在不是明智之举，试着把它放进计算属性

//首先需要引入vuex自带的api：mapState
import {mapState} from 'vuex'
//其次在计算属性里面使用api
computed: {
	...mapState(['test'])
},
//最后可以直接在页面里使用该数据
<template>
	<div>
		{{test}}  //显示vuex测试状态
	</div>
</template>

getters（vuex的计算属性）

当然不仅仅只有vue实例才有计算属性，vuex里面的getters也相当于计算属性，并且也可以放进vue实例里面的计算属性进行使用

//首先跟state的用法一致，首先需要引入vuex自带的api：mapGetters
import {mapGetters} from 'vuex'
//其次在计算属性里面使用api
computed: {
    ...mapGetters(['priceType'])
},
//最后可以直接在页面里使用该数据
<template>
	<div>
		{{priceType}}  //显示vuex测试状态
	</div>
</template>

####mutations
改变状态的唯一方法应该就是mutations了，但是每次使用都需要this.$store.commit(方法名，参数)，vuex里面自带了api：mapMutations可以让我们将mutations的方法映射到methods方法里

//首先需要引入vuex自带的api：mapMutations
import {mapMutations} from 'vuex'
//其次在methods里面引入api
methods: {
...mapMutations(['testChange'])
//然后创建自己的方法进行调用
testChangeFun（） {
    this.testChange('参数')
    }
}

actions（执行异步操作）

基础使用时this.$store,dispatch()，但是vuex提供了mapActions这样一个api，可以让我们更加便捷操作actions

//首先跟state的用法一致，首先需要引入vuex自带的api：mapActions
import {mapActions} from 'vuex'
//其次在计算属性里面使用api
methods: {
    ...mapActions(['asyncOperation'])
  //然后创建自己的方法进行调用
 asyncOperationFun（） {
    this.asyncOperation('参数')
    }
}

modules

当项目非常庞大，每个页面的数据，异步请求等数据非常多时，便于管理，我们可使用modules来进行模块化管理

//使用时，要加模块对象里添加namespaced: true,表示限定命名空间
modules: {
    demoa//es6省略式语法
}
//模块注册成功后就可以进行使用了
//使用demoa模块里的state数据
//this.$store.state + 模块名 + 状态名
this.$store.state.demoa.demoatest
//使用demoa模块里的mutations方法
this.$store.commit('模块名 + / + mutations方法名')
this.$store.commit('demoa/DEMATEXTCHANGE')
//······
//当然，模块也可以使用vuex的api，只是需要在使用api时加入模块名即可
...mapState("demoa", ["demoatest"])